Казалось бы простой калькулятор, на jQuery написал бы пару строк и готово, но на js не выходит, а нужно именно на js.
Следующий код получает число и наименование валюты из каждого div`a.
После их надо сложить и получить сумму.
Все работает, кроме одного, нужно чтобы это срабатывало для любого из классов noUi-handle-lower.
Но работает только при наведении на первый класс.
var dotted = document.querySelector('.noUi-handle-lower');
dotted.addEventListener('mouseout', function(e) {
let level_1 = document.querySelector('.num1').textContent;
let level_2 = document.querySelector('.num2').textContent;
let level_3 = document.querySelector('.num3').textContent;
let level_4 = document.querySelector('.num4').textContent;
level_1 = parseInt(level_1);
level_2 = parseInt(level_2);
level_3 = parseInt(level_3);
level_4 = parseInt(level_4);
let itog = level_1 + level_2 + level_3 + level_4;
let sum = document.querySelector('.sum');
sum.innerHTML = itog+' уе.';
}, false);
Как сделать чтобы работало при увода мыши с любого из классов noUi-handle-lower?
html вкратце следующий
noUi-handle-lower - это класс для элемента ползунков, ползунки без инпутов, все пишется в div`ы
<div class="noUi-handle-lower"></div>
<div class="noUi-handle-lower"></div>
<div class="noUi-handle-lower"></div>
<div class="noUi-handle-lower"></div>
<div class="num1">157 уе.</div>
<div class="num2">5 уе.</div>
<div class="num3">2 уе.</div>
<div class="num4">632 уе.</div>
<div class="sum"></div>
Мой код срабатывает только на первом ползунке.
Видимо нужно обратится через родителя, как сделал UModeL
querySelector
возвращает первый элемент, который соответствует указанному селектору. ПопробуйтеquerySelectorAll