Parsing input without requiring button press with Javascript

Question

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>

CertainPerformance · Accepted Answer · 2018-05-13 03:27:25Z

2

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

answered May 13, 2018 at 3:27

CertainPerformance

374k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yohan Over a year ago

Just one last question, what would the script look like without the NodeList.forEach ? Would I just have to add .addEventListener('keyup', CalcTotal) on every variable ?

CertainPerformance Over a year ago

...It's in the For example snippet I posted just under that

Yohan Over a year ago

Oh yeah ok, I just wanted to know what the code would look like if we were to apply it to every one of them instead of all of them.

Collectives™ on Stack Overflow

Parsing input without requiring button press with Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related