I'm trying to find the total value entered by the user. Get an aggregate that multiplies numbers with their identical values
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粉4312202792024-04-07 11:55:33
Please try 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;
}