how to get total value returned from the input field-CodePudding

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" ></th>
      <th ></th>

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

    </tr>
    <tr>
      <th>50</th>
      <th><input name="notes50" type="text" ></th>
      <th ></th>
    </tr>
    <tr>
      <th>20</th>
      <th><input name="notes20" type="text" ></th>
      <th ></th>
    </tr>

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

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

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

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


  </table>

</body>

</html>

CodePudding user response：

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

CodePudding user response：

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" ></th>
      <th ></th>

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

    </tr>
    <tr>
      <th>50</th>
      <th><input name="notes50" type="text" ></th>
      <th ></th>
    </tr>
    <tr>
      <th>20</th>
      <th><input name="notes20" type="text" ></th>
      <th ></th>
    </tr>

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

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

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

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