Как работать с событиями и DOM?

Question

[Андрей Неумыванный]

Сразу скажу, я учусь, буду благодарен за подробное объяснение.

Есть задача, при нажатии на стрелочку открывается меню выбора. Далее, при нажатии на плюс и минус происходит обновление цифры, с этим я более менее разобрался.

Что-то в этом духе:

$("#adult-plus").on("click", function(e) {
    e.preventDefault();
    $("#adult-result").text(function(index, text) {
      return String(parseInt(text) + 1);
    });
    $("#adult-minus").removeClass(
      "dropdown-guests__criterion-quantity-minus_deactivated"
    );
  });

Так вот дальше мне нужна эта цифра, или цифры из каждого блока, чтобы, например, показать кнопку "Очистить" при условии что хоть один блок больше 1, а при нажатии на "применить" эти цифры подставлялись в инпут сверху и меню закрывалось. У меня проблема в том, что цифры меняются в блоке, но при запросе их после у меня 0.

Направьте как быть, что почитать!

Comments

[Егор Живагин]

"У меня проблема в том, что цифры меняются в блоке, но при запросе их после у меня 0."

А можете этот код показать?

[Андрей Неумыванный]

$(document).ready(function() {
  /*  Начинаем работу после полной загрузки DOM */
  $("#dropdown-guests-button").click(function(e) {
    e.preventDefault();
    $(".dropdown-guests").toggleClass("dropdown-guests_default");
    $(".dropdown-guests__enter").toggleClass("dropdown-guests__enter_default");
    $(".dropdown-guests__choice").toggleClass(
      "dropdown-guests__choice_activated"
    );
  });

  $("#adult-plus").on("click", function(e) {
    e.preventDefault();
    let adultCount = $("#adult-result").val();
    $("#adult-result").text(function(index, text) {
      return String(parseInt(text) + 1);
    });
    $("#adult-minus").removeClass(
      "dropdown-guests__criterion-quantity-minus_deactivated"
    );
  });
});

console.log($("#adult-result").text());

[Андрей Неумыванный]

Егор Живагин,

вот лог вывожу после этого, а там все так же 0, при этом значение уже поменялось. Где это значение хранится?

[Егор Живагин]

Andy8888, Где это значение хранится? -- посмотрите в том же devTools , в каком конкретно элементе лежит нужное значение

В приведённом коде консоль срабатывает сразу после загрузки страницы, ещё до клика по элементу. Конечно, в этот момент значение ещё 0

[Андрей Неумыванный]

Егор Живагин, если я его перемещу в ready(function - ничего не меняется. Его можно увидеть только тут

$("#adult-result").text(function(index, text) {
      return String(parseInt(text) + 1);
    });

как только событие прошло, тоесть за пределами, я получаю этот элемент со значением 0, хотя отображает, например 3

[Егор Живагин]

Andy8888, сделайте, например, вот так. Что выведется в консоль?

function checkValue() {
    console.log($("#adult-result").text());
}

$("#adult-plus").on("click", function(e) {
    e.preventDefault();
    let adultCount = $("#adult-result").val();
    $("#adult-result").text(function(index, text) {
      return String(parseInt(text) + 1);
    });
    $("#adult-minus").removeClass(
      "dropdown-guests__criterion-quantity-minus_deactivated"
    );

    // вызываем консоль за пределами сразу после события
    checkValue();
  });

[Андрей Неумыванный]

Егор Живагин, так ну уже ближе, теперь как бы мне это значение сохранять в переменной, и обновлять ее значение

[Андрей Неумыванный]

Егор Живагин, в целом спасибо, уже есть над чем подумать

[Андрей Неумыванный]

Егор Живагин, кстати работает только если это функция, если я например выношу это в переменную,

let count = $("#adult-result").text();
;

и после в тех же местах вызываю console.log(count); у меня нули

[Егор Живагин]

Andy8888, можете полный код показать?

Answer 1

[Иван Соломенников]

Events:

https://learn.javascript.ru/introduction-browser-events
https://developer.mozilla.org/ru/docs/Web/Events

DOM:

https://learn.javascript.ru/dom-nodes
https://developer.mozilla.org/ru/docs/DOM/DOM_Refe...