Question

嘿伙计们根据价值改变文字颜色寻求帮助。如果值为零或负值，我希望它为红色，如果值为+，我希望它为绿色。以下是完整html中的一些代码，但我认为这些是关键部分。 Here is a JSFiddle正如您所看到的，该表是动态的。当您将数据输入到起始金额时，它将自动计算结束金额。起始金额加上产生总金额的账单金额。我也不确定该事件＆＃34; onchange＆＃34;是正确的。感谢您的意见和建议。

<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函数，所以如果你决定向它添加另一个字段（税或什么），它将在计算总数后调用。

＆＃13;

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()
}

＆＃13;

<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>

＆＃13;

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>

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

3 个答案: