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

使用myElement.innerHTML，而不是myElement，最後計算的調用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>

Answer 2

只用一個函數就可以達到所需的結果。取而代之的是檢查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 3

一對夫婦的問題與你的原代碼：

1 - 你，檢查是否字符串myElement是大於零，你選擇，而不是元素的innerHTML。

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

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>