Javascript if else issue

Question

У меня есть div, который я хочу изменить цвет на основе значения int в div, но по какой-то причине он не меняет цвет, основываясь на выражении if else, которое я написал. Вместо этого цвет не появляется. Почему это?

<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'; 
} 

Answer 1

Вы пытаетесь проверить внутренний элемент HTTML элемента, но сравниваете его с самим элементом. Попробуйте:

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'; 
} 

Answer 2

Вы лечения элемент, как число. Вы хотите получить содержимое элемента и преобразовать его в число.

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

Answer 3

Вы передали объект HTML в оператор if вместо его фактического значения. Вы можете использовать свойство innerHTML, чтобы получить содержимое в HTML-элементе.

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

После того, как вы сохранили значение в переменной testContent, вы можете делать все, что вы хотите с ним ;-)

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

Я надеюсь, что вы найдете это полезным,

Спасибо.