Javascript if else issue

Question

I have a div that I want to change color based on the int value in the div, but for some reason it doesn't change the color based on the if else statement I wrote. Instead no color appears. Why is that?

<div id="test">66</div>

JAVASCRIPT

var testDiv = document.getElementById("test");

if (testDiv<50) {
    testDiv.style.backgroundColor = '#900000';
} else if (testDiv > 49 && testDiv < 75) {
    testDiv.style.backgroundColor = '#FF9933';
} else if (testDiv > 74) {
    testDiv.style.backgroundColor = '#00CC00';
}

Why would testDiv be a number, or in any way comparable to a number, it's clearly an element — adeneo
– adeneo, Commented Feb 5, 2015 at 22:51

Josiah Keller · Accepted Answer · 2015-02-05 22:52:42Z

4

You're treating the element like a number. You want to retrieve the element's content and convert it to a number.

var testDivValue = parseInt(testDiv.textContent, 10);

answered Feb 5, 2015 at 22:52

Josiah Keller

3,6854 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Debashish Paul · Accepted Answer · 2015-02-05 23:04:03Z

1

You are trying to check the element's innerHTML but comparing with the element itself. Try:

var testDiv = document.getElementById("test");
var value = parseInt(testDiv.innerHTML);
if(value<50){
    testDiv.style.backgroundColor = '#900000';
}
else if(value>49 && value <75){
    testDiv.style.backgroundColor = '#FF9933';
}
else if(value>74){
    testDiv.style.backgroundColor = '#00CC00';
}

answered Feb 5, 2015 at 23:04

Debashish Paul

1971 gold badge2 silver badges7 bronze badges

Comments

miksiii · Accepted Answer · 2015-02-05 23:05:38Z

0

You've passed the HTML object into the if statement instead of it's actual value. You can use innerHTML property in order to get the content within the HTML element.

var test = document.getElementById("test"); // element by id
var testContent = test.innerHTML;           // the value of inner HTML content

Once you have stored the value in testContent variable, you can do whatever you want with it ;-)

    // Check if value of inner HTML is less than 50
    if(testContent < 50) {
      alert("true, do whatever you want.");
    } else {
      alert("false");
    }

I hope you find this useful,

Thanks.

edited Feb 5, 2015 at 23:05

answered Feb 5, 2015 at 22:59

miksiii

2,49629 silver badges22 bronze badges

Collectives™ on Stack Overflow

Javascript if else issue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related