Как сложить значения с одинаковым классом js?
Нужно сложить все значения(есть значения с одинаковыми классами) и вывести сумму. Спасибо
const kmSum = document.querySelector('right-form-calculator__cost.km').innerText;
const sumService = document.querySelector('.right-form-calculator__cost.service').innerText;
const mainSum = document.querySelector('.right-form-calculator__sum');
const total = kmSum + sumService;
mainSum.innerHTML = total;
.right-form-calculator__row{
margin: 0px 0px 20px 0px;
}
.right-form-calculator__sum{
color:red;
}
<div class="right-form-calculator__column">
<div class="right-form-calculator__cost km">1600</div>
</div>
<div class="right-form-calculator__row">
<div class="right-form-calculator__cost service">750</div>
<div class="right-form-calculator__cost service">1050</div>
<div class="right-form-calculator__cost service">1100</div>
<div class="right-form-calculator__cost service">1700</div>
</div>
<div class="right-form-calculator__sum">
Сумма 3850
<span>руб</span>
</div>
Ответы (1 шт):
Автор решения: Jour
→ Ссылка
По вашему примеру кода я понимаю нечто такое) помогло?
const summ = document.getElementById("summ")
const ststSum = parseInt(document.querySelector(".km").innerHTML)
const services = document.querySelectorAll(".service")
function calcPlus() {
let calc = 0
services.forEach(el => {
calc+= parseInt(el.innerHTML)
})
console.log(calc + ststSum)
summ.innerHTML = calc + ststSum
}
calcPlus()
.right-form-calculator__row{
margin: 0px 0px 20px 0px;
}
.right-form-calculator__sum{
color:red;
}
<div class="right-form-calculator__column">
<div class="right-form-calculator__cost km">1600</div>
</div>
<div class="right-form-calculator__row">
<div class="right-form-calculator__cost service">750</div>
<div class="right-form-calculator__cost service">1050</div>
<div class="right-form-calculator__cost service">1100</div>
<div class="right-form-calculator__cost service">1700</div>
</div>
<div class="right-form-calculator__sum">
Сумма <p id="summ">3850</p>
<span>руб</span>
</div>