Javascript для условного форматирования останавливается после первой итерации

Question

Я использую некоторый код для создания функционального форматирования. Я огромный noob, когда дело доходит до кода, но я пытался быть логичным в этом и учиться у других, а также через онлайн-учебники.

Я работал над приведенным ниже кодом, который читает столбец RISK в таблице и должен проходить через инструкции IF.

<div id="[@field:Risk]"></div> 

<script> 
    var line_id = '[@field:Risk]'; 
    var line=document.getElementById(line_id).parentNode.parentNode; 
    var elems = line.getElementsByTagName("td"); 

    for (var i = 0, m = elems.length; i < m; i++) { 
     if (elems[i].innerHTML == "Low") { elems[i].style.color="ForestGreen";} 
     if (elems[i].innerHTML == "Low") { elems[i].style.fontWeight = "600";} 
     if (elems[i].innerHTML == "Mid") { elems[i].style.color="DarkOrange";} 
     if (elems[i].innerHTML == "Mid") { elems[i].style.fontWeight = "600";} 
     if (elems[i].innerHTML == "High") { elems[i].style.color = "Red";} 
     if (elems[i].innerHTML == "High") { elems[i].style.fontWeight = "600";} 
    } 
</script> 

Однако после того, как он находит первый экземпляр Low, Mid и High ни один из других появлений этих терминов выделен в соответствии с приведенной выше форматирования. Эффект цикла останавливается после нахождения трех определенных членов. Я недоумеваю, почему это может быть так. Может ли кто-нибудь помочь/объяснить, что я делаю неправильно?

Answer 1

Ваш код отлично работает для меня, см демо:http://jsbin.com/capatoyidu/edit?html,console,output

Однако, ваш код может быть уменьшена до следующего:

<div id="[@field:Risk]"></div> 
<SCRIPT LANGUAGE="JavaScript"> 
var line_id='[@field:Risk]'; 
var line=document.getElementById(line_id).parentNode.parentNode; 
var elems = line.getElementsByTagName("td"); 
for (var i=0, m=elems.length; i<m; i++) 
{ 
if (elems[i].innerHTML=="Low") { 
    elems[i].style.color="ForestGreen"; 
    elems[i].style.fontWeight = "600"; 
} else if (elems[i].innerHTML=="Mid") { 
    elems[i].style.color="DarkOrange";    
    elems[i].style.fontWeight = "600"; 
} else if (elems[i].innerHTML=="High") { 
    elems[i].style.color="Red"; 
    elems[i].style.fontWeight = "600"; 
} 
} 
</SCRIPT> 

Answer 2

Можете ли вы попробовать?

<div id="[@field:Risk]"></div> 
<SCRIPT LANGUAGE="JavaScript"> 
var line_id='[@field:Risk]'; 
var line=document.getElementById(line_id).parentNode.parentNode; 
var elems = line.getElementsByTagName("td"); 
var colors = { 
    Low: "ForestGreen", 
    Mid: "DarkOrange", 
    High: "Red", 
} 

for (var i=0, m=elems.length; i<m; i++) { 
    if (colors[elems[i].innerHTML]) { 
    elems[i].style.fontWeight = 600; 
    elems[i].style.color = colors[elems[i].innerHTML] 
    } else { 
    console.warn("Unknow value of " + elems[i].innerHTML + " for index " + i) 
    } 
}</SCRIPT> 

Answer 3

<div id="[@field:Risk]"></div> 
<script type="text/javascript">//use lowercase; LANGUAGE="JavaScript" is deprecated 
var line_id='[@field:Risk]'; 
var line=document.getElementById(line_id).parentNode.parentNode; 
var elems = line.getElementsByTagName("td"); 
for (var i=0, m=elems.length; i<m; i++) { 
if (elems[i].innerHTML=="Low") { 
    elems[i].style.color="ForestGreen"; 
    elems[i].style.fontWeight = "600";} 
//if (elems[i].innerHTML=="Low") { elems[i].style.fontWeight = "600";} 
if (elems[i].innerHTML=="Mid") { 
    elems[i].style.color="DarkOrange"; 
    elems[i].style.fontWeight = "600";} 
//if (elems[i].innerHTML=="Mid") { elems[i].style.fontWeight = "600";} 
if (elems[i].innerHTML=="High") { 
    elems[i].style.color="Red"; 
    elems[i].style.fontWeight = "600";} 
//if (elems[i].innerHTML=="High") { elems[i].style.fontWeight = "600";} 
} 
</script>