javascript 如何获取从输入字段返回的总值

qqrboqgw 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(130)

我试图找到我的用户输入的总值。以获得与它相同的值相乘的数字的聚合

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>

JavaScript

来源：https://stackoverflow.com/questions/74933883/how-to-get-total-value-returned-from-the-input-field

2条答案

按热度按时间

eqqqjvef1#

请试着这样做。这对你会有用的。

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

赞(0）回复(0）举报 2022-12-28

e5njpo682#

下面是另一个代码最少的解决方案：

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>

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 如何获取从输入字段返回的总值

2条答案

相关问题

热门标签

最新问答