CODEWITHSUNDEEP
javascript
Mark White
Mark White

Reputation: 173

Dynamically change the color or text based on value with Javascript

Hey guys looking for some assistance with changing the color of text based on value. If the value is zero or negative I want it to be red, and if the value is + I want it to be green. Below is just a little bit of code from the full html but I think these are the key parts. Here is a JSFiddle As you can see the table is dynamic. As you input data into the starting amount it will automatically calculate it for the ending amount. The starting amount adds to the bill amount which produces the total amount number. I am also not sure if the event "onchange" is correct. Thank you for your input and advise in advanced. 

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

Upvotes: 1

Views: 13174

Answers (3)

Sagar V
Sagar V

Reputation: 12478

use myElement.innerHTML instead of myElement in the if condition and invoke the changeColor function at last of calc

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>

Upvotes: 1

larz
larz

Reputation: 5766

A couple issues with your original code:

1 - you were checking if the string myElement was greater than zero, instead of the innerHTML of the element you selected.

2 - using innerHTML() to change the contents of an element doesn't fire an onchange event. In my code, I call your colorChange function at the end of the calc function, so if you decide to add another field to it (tax or something), it will be called after the total is calculated.

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>

Upvotes: 1

kind user
kind user

Reputation: 41893

You can reach the desired result using just one function. Instead of checking the DOM element's innerHTML or textContext to get the amount, just refer to the variables holding it.

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>

Upvotes: 2

Related Questions