javascript - 使用 Javascript 根据值动态更改颜色或文本

Question

大家好，希望获得有关根据值更改文本颜色的帮助。如果值为零或负数，我希望它为红色，如果值为 +，我希望它为绿色。下面是完整 html 中的一小部分代码，但我认为这些是关键部分。 Here is a 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>