使用Javascript根據值動態更改顏色或文本

Question

大家需要幫助，以根據值更改文本的顏色。 如果值是零或負，我希望它是紅色，如果值是+，我希望它是綠色。 下面只是完整html的一些代碼，但我認為這些是關鍵部分。 這是一個JSFiddle如您所見，表是動態的。 當您將數據輸入起始金額時，它將自動為結束金額進行計算。 起始金額加到產生總編號的賬單金額中。 我也不確定事件“ onchange”是否正確。 感謝您的輸入，並提供高級建議。

<p><b>Starting Amount: &#36; <input id="money" type="number"   onkeyup="calc()"></b></p>

<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number"  class="billAmt" id="billAmt" onkeyup="calc()">      </td>
</tr>
</table>

<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: &#36; <span id="totalAmt"         onchange="colorChange(this)">0</span></b></p>

<script type="text/Javascript">
var myElement = document.getElementById('totalAmt');
function colorChange() {
    if('myElement' > 0) {
        totalAmt.style.color = 'green'; 
        } else {
                totalAmt.style.color = 'red';
    }
}


function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt') ;
var billTotal = 0;

for (i = 0; i < bills.length; i++) {
  billTotal += parseInt(bills[i].value) || 0;
}

totalAmt.innerHTML = money + billTotal;
}
</script>

Answer 1

僅使用一種功能就可以達到所需的結果。 無需檢查DOM元素的innerHTML或textContext來獲取數量，只需引用保存它的變量即可。

 var myElement = document.getElementById('totalAmt'); function calc() { var money = parseInt(document.querySelector('#money').value) || 0; var bills = document.querySelectorAll('table tr input.billAmt'); var billTotal = 0; for (i = 0; i < bills.length; i++) { billTotal += parseInt(bills[i].value) || 0; } totalAmt.innerHTML = money + billTotal; myElement.style.color = money + billTotal <= 0 ? 'red' : 'green'; } 

 <p><b>Starting Amount: &#36; <input id="money" type="number" onkeyup="calc()"></b></p> <table> <tr> <th>Bill Ammount</th> </tr> <tr> <td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"></td> </tr> </table> <input type="hidden" id="total" name="total" value="0"> <p><b>Ending Amount: &#36; <span id="totalAmt">0</span></b></p> 

Answer 2

您的原始代碼有幾個問題：

1-您正在檢查字符串myElement是否大於零，而不是所選元素的innerHTML。

2-使用innerHTML()更改元素的內容不會觸發onchange事件。 在我的代碼中，我在calc函數的末尾調用您的colorChange函數，因此，如果您決定向其中添加另一個字段（稅或其他內容），則在計算總數后將調用該字段。

 function colorChange() { var myElement = document.getElementById('totalAmt'); if (myElement.innerHTML > 0) { totalAmt.style.color = 'green'; } else { totalAmt.style.color = 'red'; } } function calc() { var money = parseInt(document.querySelector('#money').value) || 0; var bills = document.querySelectorAll('table tr input.billAmt'); var billTotal = 0; for (i = 0; i < bills.length; i++) { billTotal += parseInt(bills[i].value) || 0; } totalAmt.innerHTML = money + billTotal; colorChange() } 

 <p><b>Starting Amount: &#36; <input id="money" type="number" onkeyup="calc()"></b></p> <table> <tr> <th>Bill Ammount</th> </tr> <tr> <td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"> </td> </tr> </table> <input type="hidden" id="total" name="total" value="0"> <p><b>Ending Amount: &#36; <span id="totalAmt">0</span></b></p> 

Answer 3

在if條件中使用myElement.innerHTML代替myElement並在calc的最后調用changeColor函數

 var myElement = document.getElementById('totalAmt'); function colorChange() { if (myElement.innerHTML <= 0) { totalAmt.style.color = 'red'; } else { totalAmt.style.color = 'green'; } } function calc() { var money = parseInt(document.querySelector('#money').value) || 0; var bills = document.querySelectorAll('table tr input.billAmt'); var billTotal = 0; for (i = 0; i < bills.length; i++) { billTotal += parseInt(bills[i].value) || 0; } totalAmt.innerHTML = money + billTotal; colorChange(); } 

 <p><b>Starting Amount: &#36; <input id="money" type="number" onkeyup="calc()"></b></p> <table> <tr> <th>Bill Ammount</th> </tr> <tr> <td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"></td> </tr> </table> <input type="hidden" id="total" name="total" value="0"> <p><b>Ending Amount: &#36; <span id="totalAmt">0</span></b></p>