1

Казалось бы простой калькулятор, на 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

2
  • Может быть потому, что querySelector возвращает первый элемент, который соответствует указанному селектору. Попробуйте querySelectorAll 20 июл 2021 в 21:02
  • пробовал ранее, не помогает, я уж и в гугле искал не смог найти, может не так запросы поисковику писал
    – FloatLeft
    20 июл 2021 в 23:26

1 ответ 1

1

Так как HTML-разметку Вы не приложили (а у меня есть подозрение, что количество блоков .noUi-handle-lower может меняться), то - JS и делегирование:

document.querySelector('.noUi-handle-lower-wrap').addEventListener('mouseout', function(ev) {
  let target = ev.target;
  if (!target.classList.contains('noUi-handle-lower')) return

  target.querySelector('.sum').innerHTML = [...target.querySelectorAll('[class^="num"]')].reduce((acc, el) => {
    return acc += parseInt(el.textContent)
  }, 0) + ' уе.';
});
.noUi-handle-lower { background-color: #fa08; }
.noUi-handle-lower > div { pointer-events: none; }
<div class="noUi-handle-lower-wrap">
  <div class="noUi-handle-lower">
    <div class="num1">15 долларов</div>
    <div class="num2">7 фунтов</div>
    <div class="num3">23 йены</div>
    <div class="num4">63 рубля</div><hr>
    <div class="sum"></div>
  </div><hr>
  <div class="noUi-handle-lower">
    <div class="num1">11 долларов</div>
    <div class="num2">77 фунтов</div>
    <div class="num3">233 йены</div>
    <div class="num4">3 рубля</div><hr>
    <div class="sum"></div>
  </div><hr>
  <div class="noUi-handle-lower">
    <div class="num1">157 долларов</div>
    <div class="num2">5 фунтов</div>
    <div class="num3">2 йены</div>
    <div class="num4">632 рубля</div><hr>
    <div class="sum"></div>
  </div>
</div>

После дополнения в вопросе, делаем ещё одну попытку в "Угадайке":

document.querySelector('.noUi-handle-lower-wrap').addEventListener('mouseout', fCalc);

function fCalc(ev) {
  if (!ev.target.classList.contains('noUi-handle-lower')) return

  this.querySelector('.sum').innerHTML = [...this.querySelectorAll('[class^="num"]')].reduce((acc, el) => {
    return acc += parseInt(el.textContent)
  }, 0) + ' уе.';
}

/* Код ниже, только для интерактивности данного примера и проекте он не нужен! */
document.querySelector('.noUi-handle-lower-wrap').addEventListener('input', function(ev) { let target = ev.target; if (!target.classList.contains('noUi-handle-lower')) return; target.nextElementSibling.textContent=target.value; });
[class^="num"] { display: inline-block; }
[class^="num"]::after { content: ' уе.'; }
<div class="noUi-handle-lower-wrap">
  <input type="range" class="noUi-handle-lower"><div class="num1">50</div><br>
  <input type="range" class="noUi-handle-lower"><div class="num2">50</div><br>
  <input type="range" class="noUi-handle-lower"><div class="num3">50</div><br>
  <input type="range" class="noUi-handle-lower"><div class="num4">50</div><hr>
  <div class="sum"></div>
</div>

7
  • не хочет так работать, подставляю своего родителя
    – FloatLeft
    20 июл 2021 в 23:35
  • @FloatLeft: что за партизанщина? Почему не указали сразу, что это плагин, и не дали ссылку на него?
    – UModeL
    21 июл 2021 в 3:21
  • 1
    Спасибо огромное, @UModel, все работает))) кроме функции fCalc (в моем случае там в блоках цифры с буквами) мне нужна была только верхняя строчка - эту фишку в js я точно запомню. Еще раз спасибо!
    – FloatLeft
    21 июл 2021 в 8:48
  • @FloatLeft Приветствую Вас на RuSO Если ответ вам был полезен, не забудьте отметить его галочкой, слева от цифры у ответа. 22 июл 2021 в 6:16
  • @Alexandr_TT - несколько раз кликал галку только правила на сайте - "Спасибо за отзыв! Голоса от участников с репутацией менее 15 учитываются, но не меняют публично отображаемое значение рейтинга."
    – FloatLeft
    22 июл 2021 в 7:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.