取得輸入欄位的總回傳值方法
P粉419164700
P粉419164700 2024-04-06 18:19:37
0
1
560

我正在嘗試尋找用戶輸入的總價值。得到將數字與其相同值相乘的聚合

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>

P粉419164700
P粉419164700

全部回覆(1)
P粉431220279

請嘗試這樣做。這對你有用。

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;
 }
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板