CODEWITHSUNDEEP
javascripthtmlcalculator
Yohan
Yohan

Reputation: 45

Parsing input without requiring button press with Javascript

I am currently looking for a solution to add some user-typed numbers instantly/automatically without having to click on any button. For now, I have a table asking the user for the numbers and displaying the result after the user clicked on the "Total" button. I would like to get rid of that button and that the "Total" row of the table automatically refresh to the new total, every time the user changes a value.

<!DOCTYPE html>
<html>
<head>

<title>Table</title>
<style>
body {
    width: 100%;
    height: 650px;
}

#rent, #food, #entertainment, #transportation, #total {
height: 30px;
font-size: 14pt;
}
</style>
</head>

<body>
<center>
<h1></h1>
<script type="text/javascript">

function CalcTotal() {
var total = 0;


var rent = +document.getElementById("rent").value;

var food = +document.getElementById("food").value;

var entertainment = +document.getElementById("entertainment").value;

var transportation = +document.getElementById("transportation").value;

var total = rent + food + entertainment + transportation;

document.getElementById("total").innerHTML = total;
}
</script>

<table  border="1">
    <tr>
        <th>A</th>
        <th>B</th>
    </tr>

    <tr>
        <td>Rent</td><td><input type="text" id="rent"></td>
    </tr>

    <tr>
        <td>Food</td><td><input type="text" id="food"></td>
    </tr>

    <tr>
        <td>Entertainment</td><td><input type="text" id="entertainment"></td>
    </tr>

    <tr>
        <td>Transportation</td><td><input type="text" id="transportation"> </td>
    </tr>

    <tr>
        <td>Total</td><td><div id="total"></div></td>
    </tr>

</table>

<input type="submit" value="Total" onclick="CalcTotal()" id="total">

</center>

</body>
</html>

Upvotes: 2

Views: 53

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371019

Add a keyup listener to every input field:

function CalcTotal() {
  var total = 0;
  var rent = +document.getElementById("rent").value;
  var food = +document.getElementById("food").value;
  var entertainment = +document.getElementById("entertainment").value;
  var transportation = +document.getElementById("transportation").value;
  var total = rent + food + entertainment + transportation;
  document.getElementById("total").innerHTML = total;
}

document.querySelectorAll('input[type="text"]')
  .forEach(input => input.addEventListener('keyup', CalcTotal));
body {
  width: 100%;
  height: 250px;
}

#rent,
#food,
#entertainment,
#transportation,
#total {
  height: 30px;
  font-size: 14pt;
}
<table border="1">
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>

  <tr>
    <td>Rent</td>
    <td><input type="text" id="rent"></td>
  </tr>

  <tr>
    <td>Food</td>
    <td><input type="text" id="food"></td>
  </tr>

  <tr>
    <td>Entertainment</td>
    <td><input type="text" id="entertainment"></td>
  </tr>

  <tr>
    <td>Transportation</td>
    <td><input type="text" id="transportation"> </td>
  </tr>

  <tr>
    <td>Total</td>
    <td>
      <div id="total"></div>
    </td>
  </tr>

</table>

<input type="submit" value="Total" onclick="CalcTotal()" id="total">

Note that NodeList.forEach is somewhat new - if you have to support old browsers, you'll have to use a polyfill, or iterate over the inputs some other way instead. For example:

Array.prototype.forEach.call(
  document.querySelectorAll('input[type="text"]'),
  input => input.addEventListener('keyup', CalcTotal)
);

Upvotes: 2

Related Questions