How to display none or block element depends on numbers (like windspeed or temperature) on javascript?

Question

<div class="falling-leaves"></div>

if (type == "weather") {
    doc.getElementById('windspeed').innerHTML = " " + weather.windSpeed + " km/s";

    var windsp = doc.getElementById('windspeed');

         if (windsp <= 15){
                document.getElementsByClassName("falling-leaves").style.display = "none";

            }else{
            document.getElementsByClassName("falling-leaves").style.display = "block";

            }
            }

not working. I would like to hide falling-leaves container if windSpeed >=15 else display block. Thank you for your help.

`windsp` is an element. An element cannot be compared to a number in any intelligent way. Just use `weather.windSpeed`. Also, review [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Heretic Monkey, Jun 04 '19 at 14:14
Possible duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Jun 04 '19 at 14:18

obscure · Answer 1 · 2019-06-04T14:25:30.947

var windsp = doc.getElementById('windspeed');

getElementById is supposed to return a html element. Furthermore doc should be document. No matter what - this won't return your windspeed.

Conveniently you already set up an object weather.windSpeed - so why don't we use this instead?

Furthermore - as Heretic Monkey pointed out - getElementsByClassName returns a html collection - so basically an array. From what you've posted you just have one element - the div - actually using this class. document.getElementsByClassName("falling-leaves")[0] makes sure we're referencing the first element found.

if (type == "weather") {
  document.getElementById('windspeed').innerHTML = " " + weather.windSpeed + " km/s";

  if (parseInt(weather.windSpeed) <= 15) {
    document.getElementsByClassName("falling-leaves")[0].style.display = "none";
  } else {
    document.getElementsByClassName("falling-leaves")[0].style.display = "block";

  }
}

`getElementsByClassName` returns an `HTMLCollection`, which does not have a `style` property. Did you test this? — Heretic Monkey, Jun 04 '19 at 14:18
Good catch! I must confess, I didn't look out for other errors yet. — obscure, Jun 04 '19 at 14:18

score 0 · Answer 2 · answered Jun 04 '19 at 14:18

You have quite a few errors in your code.

You are assigning windsp as an element not the value. You need to get the value of the innerhtml not comparing the element.
getElementsByClassname returns an array. You need to get the element from that array before you can apply a style.
When you get the value of windsp, because you have added km/s to it you cannot just simply do math on it. You need to parse the internal int value and actually use that. we can't do 10km/s <= 15 but we can do 10 <= 15.
Unless you are declaring var doc = document; somewhere, you can't just say doc, it needs to be document.

var type = "weather";
var weather = {
    windSpeed: 10
}

if (type == "weather") {
    document.getElementById('windspeed').innerHTML = " " + weather.windSpeed + " km/s";
    //Get the actual value and parse it as an int. 
    var windsp = parseInt(document.getElementById('windspeed').innerHTML);
    if (windsp <= 15){
        // Get the element at index 0 as that is the only element you need to style 
        document.getElementsByClassName("falling-leaves")[0].style.display = "none";
    }else{
        document.getElementsByClassName("falling-leaves")[0].style.display = "block";
    }
}

<div class="falling-leaves">Pretend I am a leaf</div>
<div id="windspeed"></div>

How to display none or block element depends on numbers (like windspeed or temperature) on javascript?

2 Answers2