javascript - How to hide an element or div if a string is null? - Stack Overflow

admin管理员组

文章数量:1335562

I have a website that uses server-generated JSON objects to populate its content. I want to implement optional text descriptions for images which only appear if an image has a description. I tried to do this by assigning the description contained in a JSON object to a string and checking if the string equals "null" or not, but this didn't work. Here is my code:

HTML:

<p id="image-description"></p>

JavaScript:

// Note: I'm not trying to populate the innerHTML of <p> with the content 
// of `descriptionString` here 

// At beginning of script:
var descriptionString = ''

// Inside function that populates website with content from JSON object:
parsedJSON = JSON.parse(this.responseText);

descriptionString = parsedJSON['activities'][0]['description'];
if (descriptionString != 'null') {
    document.getElementById('image-description').style.display = 'block';
} else {
    document.getElementById('image-description').style.display = 'none';
}

The image-description element always appears with this code, even when descriptionString is 'null'. I also tried using .style.visibility = 'visible'; and .style.visibility = 'hidden'; as well as putting the element in a div, but they all produced the same result. Moreover, when I set a default style for image-description with CSS and tried to modify it with JavaScript it wouldn't change.

I've confirmed that the string from parsedJSON is being properly assigned to descriptionString (and assigns 'null' when no string is present) so I must be doing something else wrong.

I haven't found any other answers that address this exact scenario, and I am trying not to use external libraries like jQuery. What is the best way to solve this with pure JavaScript?

I have a website that uses server-generated JSON objects to populate its content. I want to implement optional text descriptions for images which only appear if an image has a description. I tried to do this by assigning the description contained in a JSON object to a string and checking if the string equals "null" or not, but this didn't work. Here is my code:

HTML:

<p id="image-description"></p>

JavaScript:

// Note: I'm not trying to populate the innerHTML of <p> with the content 
// of `descriptionString` here 

// At beginning of script:
var descriptionString = ''

// Inside function that populates website with content from JSON object:
parsedJSON = JSON.parse(this.responseText);

descriptionString = parsedJSON['activities'][0]['description'];
if (descriptionString != 'null') {
    document.getElementById('image-description').style.display = 'block';
} else {
    document.getElementById('image-description').style.display = 'none';
}

The image-description element always appears with this code, even when descriptionString is 'null'. I also tried using .style.visibility = 'visible'; and .style.visibility = 'hidden'; as well as putting the element in a div, but they all produced the same result. Moreover, when I set a default style for image-description with CSS and tried to modify it with JavaScript it wouldn't change.

I've confirmed that the string from parsedJSON is being properly assigned to descriptionString (and assigns 'null' when no string is present) so I must be doing something else wrong.

I haven't found any other answers that address this exact scenario, and I am trying not to use external libraries like jQuery. What is the best way to solve this with pure JavaScript?

• javascript
• html
• css
• json
• dom

Share Improve this question Follow asked Feb 15, 2018 at 18:02 ThanksForTheHelpAgainThanksForTheHelpAgain 3911 gold badge22 silver badges88 bronze badges 6

• 6 Are you 100% certain that the value of the JSON property is 'null' and not null? There's a world of difference between the string value "null" and the actual value null. – JDB Commented Feb 15, 2018 at 18:05
• Including your JSON, or a representative sample, would probably be very helpful. – JDB Commented Feb 15, 2018 at 18:07
• Can you show the JSON file? – Vinayak Commented Feb 15, 2018 at 18:08
• 1 I'm pretty certain that the value is 'null' instead of null for 3 reasons: 1.) when "null" is assigned to the description column for an entry in my database it appears to be treated as a string, 2.) when I changed my code to check if descriptionString != 'a-different-string-from-the-database' the same error occurred, and 3.) the Java version of the code in my post worked perfectly when I built an android app that receives the exact same JSON from the server. – ThanksForTheHelpAgain Commented Feb 15, 2018 at 18:15
• 1 Actually, the menters here were right: the JSON really was sending null instead of 'null'. I didn't think this was the case because I experienced an error when I initially tried to treat the response as null, but I just realized that the error was caused by something else. My code works now -- thank you! – ThanksForTheHelpAgain Commented Feb 15, 2018 at 18:29

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

First try to understand the difference between null & 'null'.

null : null is used to represent the absence of some value.

descriptionString = null;
if (descriptionString != null) {
    document.getElementById('image-description').style.display = 'block';
} else {
    document.getElementById('image-description').style.display = 'none';
}

<div id="image-description">
Image 
</div>

'null' : '' represent a string in JavaScript.

descriptionString = 'null';
if (descriptionString != null) {
    document.getElementById('image-description').style.display = 'block';
} else {
    document.getElementById('image-description').style.display = 'none';
}

<div id="image-description">
Image 
</div>

You are missing an = in your parison, and also remove the quotes (unless you pare against a string).

if (descriptionString !== null)

you have an error in your code .just missed a semicolon in descrition and check whether element is empty or initialize variable to null. below is the snippet to prove

var descriptionString = '';

// Inside function that populates website with content from JSON object:
parsedJSON = JSON.parse(this.responseText);

descriptionString = parsedJSON['activities'][0]['description'];
if (descriptionString != '') {
    document.getElementById('image-description').style.display = 'block';
} else {
    document.getElementById('image-description').style.display = 'none';
}

In JavaScript null is "nothing". It is supposed to be something that doesn't exist.

Unfortunately, in JavaScript, the data type of null is an object.

You can consider it a bug in JavaScript that typeof null is an object. It should be null.

correct one:

<p>An empty string has both a legal value and a type:</p>

<p id="demo"></p>

<script>
var car = null;
if(car ==null)
  document.getElementById("demo").innerHTML ="The value is: " +car + "<br>" +"The type is: " + typeof car;
</script>

wrong one:

<p>An empty string has both a legal value and a type:</p>

<p id="demo"></p>

<script>
var car = '';
if(car ==null)
  document.getElementById("demo").innerHTML ="The value is: " +car + "<br>" +"The type is: " + typeof car;
</script>

Try this one

 if (!descriptionString.trim()||descriptionString.trim().length == 0) {
         document.getElementById('image-
       description').style.display = 'none';
      }
      else
      {
    document.getElementById('image-description').style.display = 'block';
      }

Remember String value "null" and normal null value are not same.keep that difference in mind while debugging

本文标签： javascriptHow to hide an element or div if a string is nullStack Overflow