how to get total value returned from the input field

Question

I'm trying to find a total value of my user inputs. to get the aggregate which multiply the number with it same value

let Dem200 = document.querySelector(".input_200");
let output200 = document.querySelector(".result_200");
Dem200.addEventListener('blur', function() {
  let result200 = parseInt(Dem200.value) * 200;
  output200.innerHTML = result200;
})

let Dem100 = document.querySelector(".input_100");
let output100 = document.querySelector(".result_100");
Dem100.addEventListener('blur', function() {
  let result100 = parseInt(Dem100.value) * 100;
  output100.innerHTML = result100;
})

let Dem50 = document.querySelector(".input_50");
let Dem20 = document.querySelector(".input_20");
let Dem10 = document.querySelector(".input_10");
let Dem5 = document.querySelector(".input_5");
let Dem1 = document.querySelector(".input_1");

let output50 = document.querySelector(".result_50");
let output20 = document.querySelector(".result_20");
let output10 = document.querySelector(".result_10");
let output5 = document.querySelector(".result_5");
let output1 = document.querySelector(".result_1");

Dem50.addEventListener('blur', function() {
  let result50 = parseInt(Dem50.value) * 50;
  output50.innerHTML = result50;
})

Dem20.addEventListener('blur', function() {
  let result20 = parseInt(Dem20.value) * 20;
  output20.innerHTML = result20;
})

Dem10.addEventListener('blur', function() {
  let result10 = parseInt(Dem10.value) * 10;
  output10.innerHTML = result10;
})

Dem5.addEventListener('blur', function() {
  let result5 = parseInt(Dem5.value) * 5;
  output5.innerHTML = result5;
})

Dem1.addEventListener('blur', function() {
  let result1 = parseInt(Dem1.value) * 1;
  output1.innerHTML = result1;
})

window.onchange = function() {
  var inputs = document.getElementsByTagName('input'),
    resultinchancge = document.getElementById('total'),
    sum = 0;

  for (var i = 0; i < inputs.length; i++) {
    var ip = inputs[i];

    if (ip.name && ip.name.indexOf("total") < 0) {
      sum += parseInt(ip.value) || 0;
    }

  }

  resultinchancge.value = sum;
}

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 0px solid;
      font-size: 30px;
    }
    
    input {
      font-size: 30px;
    }
    
    input {
      text-align: center;
    }
  </style>
</head>

<body>


  <table>
    <tr>
      <th>200</th>
      <th><input name="notes200" type="text" class="input_200"></th>
      <th class="result_200"></th>

    </tr>
    <tr>
      <th>100</th>
      <th><input name="notes100" type="text" class="input_100"></th>
      <th class="result_100"></th>

    </tr>
    <tr>
      <th>50</th>
      <th><input name="notes50" type="text" class="input_50"></th>
      <th class="result_50"></th>
    </tr>
    <tr>
      <th>20</th>
      <th><input name="notes20" type="text" class="input_20"></th>
      <th class="result_20"></th>
    </tr>

    <tr>
      <th>10</th>
      <th><input name="notes10" type="text" class="input_10"></th>
      <th class="result_10"></th>
    </tr>

    <tr>
      <th>5</th>
      <th><input name="notes5" type="text" class="input_5"></th>
      <th class="result_5"></th>
    </tr>

    <tr>
      <th>1</th>
      <th><input name="notes1" type="text" class="input_1"></th>
      <th class="result_1"></th>
    </tr>

    <tr>
      <th>Total1</th>
      <th><input type="text" name="totalnotes" id="total" /></th>
    </tr>


  </table>

</body>

</html>

Do not add spam text to your post to get around the requirement that asks you to explain more of the problem - instead, please *actually explain the problem in more detail*, such as what sort of debugging you've tried that isn't working. It could also be helpful to look up how to create a [MCVE] - consider trimming out code that's not directly related to the problem. — CertainPerformance, Dec 27 '22 at 20:32
You shouldn't sum the input values, because those aren't multiplied by the denominations. You should sum the `result_XXX` texts. — Barmar, Dec 27 '22 at 20:41

score 0 · Answer 1 · answered Dec 27 '22 at 20:57

0

Please try to do like this. This will work for you.

window.onchange = function() {
    var inputs = document.getElementsByTagName('input');
        resultinchancge = document.getElementById('total');
           const sum = [...document.querySelectorAll('[class*=result]')].reduce((r, e) => {
      return r + parseInt(e.textContent)
    }, 0)
    
    console.log(sum)
        
        resultinchancge.value = sum;
 }

answered Dec 27 '22 at 20:57

David F

605
4
10

Kindly check if my answer helped you. – David F Dec 27 '22 at 23:04

Carsten Massmann · Answer 2 · 2022-12-30T16:05:00.637

Here is another solution with minimal code:

const resAll=[...document.querySelectorAll("[class^=result_]")];
document.body.addEventListener("input",ev=>{
  const el=ev.target, denom=+el.name.replace("notes","");
  document.querySelector(".result_"+denom).textContent=el.value*denom;
  document.getElementById("total").value=resAll.reduce((a,c)=>+c.textContent+a,0)
});

    table,
    th,
    td {
      border: 0px solid;
      font-size: 30px;
    }
    
    input { 
      width: 100px;
      font-size: 30px;
      text-align: center;
    }

  <table>
    <tr>
      <th>200</th>
      <th><input name="notes200" type="text" class="input_200"></th>
      <th class="result_200"></th>

    </tr>
    <tr>
      <th>100</th>
      <th><input name="notes100" type="text" class="input_100"></th>
      <th class="result_100"></th>

    </tr>
    <tr>
      <th>50</th>
      <th><input name="notes50" type="text" class="input_50"></th>
      <th class="result_50"></th>
    </tr>
    <tr>
      <th>20</th>
      <th><input name="notes20" type="text" class="input_20"></th>
      <th class="result_20"></th>
    </tr>

    <tr>
      <th>10</th>
      <th><input name="notes10" type="text" class="input_10"></th>
      <th class="result_10"></th>
    </tr>

    <tr>
      <th>5</th>
      <th><input name="notes5" type="text" class="input_5"></th>
      <th class="result_5"></th>
    </tr>

    <tr>
      <th>1</th>
      <th><input name="notes1" type="text" class="input_1"></th>
      <th class="result_1"></th>
    </tr>

    <tr>
      <th>Total1</th>
      <th><input type="text" name="totalnotes" id="total" /></th>
    </tr>
  </table>

denom=+el.name.replace("notes","") gets the current denomination value the input element is referring to from its name by first removing the string "notes" and then converting the remaining string into a numerical value through the unary operator +. The next expression then updates the textContent of the correspoding ".result_"+denom element with the product of the input element's value and denom.

The third expression simply sums up all the .result... values by using a .reduce() loop.

Dear Could you please explain this part of the code const resAll=[...document.querySelectorAll("[class^=result_]")]; — Hamdy Elgendy, Dec 30 '22 at 13:34
The expression will create an array (and not just a collection) of all DOM elements having a className starting with "result_". Only arrays have the `.reduce()` method available to them. — Carsten Massmann, Dec 30 '22 at 13:52
Thank you Carsten, I have a little problem with your code I'm just a beginner with the language and I tried more to understand your script but I have found that your code is very advanced compared to mine. Thank you again — Hamdy Elgendy, Dec 30 '22 at 14:06

how to get total value returned from the input field

2 Answers2