Как передать значение переменной в другую функцию, используя addEventListener?

Question

[alexbog90]

Добрый день.

Есть глобальная переменная num = 1, которая используется в первой функции. Первая функция изменяет эту переменную, скажем, теперь num = 3. Как теперь мне переписать глобальную переменную, чтобы она равнялась 3 и чтобы на основании уже измененной переменной вторая функция что-то делала?

let num = 1;

document.querySelector(".buttons-add-to-totals__button").addEventListener("click", function() {
  if (document.querySelector(`.food-item-${num}-text-container`).classList.contains("hidden")) {
    num;
  } else {
    num++;
  }
  // немного кода, меняем глобальную переменную num
});

// уже в первой строке нужно использовать обновленную глобальную переменную
document.querySelector(`.food-item-${num}-bin`).addEventListener("click", function() {
  if (document.querySelector(`.food-item-${num}-text-container`).classList.contains("hidden")) {
    num;
  } else {
    num--;
  }
  // немного кода
});

Answer 1

[Сергей Соколов]

Слушать события клика на всех элементах с классами .food-item-* (может, у них у всех есть какой-то общий класс?) или document.querySelectorAll('[class^=.food-item-]')

При клике брать значение классов, похожих на .food-item-NNN-bin (регуляркой) и выдирать оттуда число.

Но это, вестимо, костыль.

Тут не хорошо, что значение класса используется не для отображения элемента, а для хранения каких-то его данных, этого самого числа. Класс обычно один-для-нескольких элементов. А для данных элемента есть data-атрибуты.

Comments

[alexbog90]

Сергей, спасибо за совет.

Возможно я вас не понял или не правильно поставил вопрос.

Первая функция нужна для того, чтобы когда num = 1, при клике на кнопку Add To My Totals (номер 1 на скриншоте) информация о продукте добавляется в левую часть окна (my totals, номер 2 на скрине) и там остается. После того как я добавил первый продукт в my totals, функция увеличивает переменную num до значения "2" и я могу добавить еще один продукт, но уже во второй слот (для этого и менял переменную, чтобы не переписывать первый слот) и т.д.

Второй функцией я хочу прочитать уже измененную переменную num и, допустим, если я добавил 3 продукта в my totals (как на скриншоте), т.е. num = 3, то при нажатии на иконку удаления (класс .food-item-${num}-bin, в нашем случае .food-item-3-bin), удалялся продукт только из ячейки номер 3 и т.д.

Можно конечно для каждой из ячеек (их 5 на скриншоте) добавить свою функцию, удалив ${num} из имени класса, но что если добавить пагинацию и таких страниц с ячейками будет 10, соответственно ячеек будет 50, не добавлять же 50 функций?

[alexbog90]

Разобрался. Просто использую while цикл до тех пор пока не дойдем до ячейки с классом hidden и затем исполняю код, а для удаления использую while цикл пока не дойдем до ячейки с классом visible.

[VladLeonenko]

alexbog90, добрый день. Вы бы мне очень помогли своим примером на данную тему. У меня похожая задача и я уже неделю бьюсь без результата. Можете отправить пример скрипта?

[alexbog90]

// clicking Add To My Totals button
document.querySelector(".details-first-row-second-column-add-to-totals__button").addEventListener("click", function() {

  let foodItemNumber = 1;
  
  while (document.querySelector(`.food-item-${foodItemNumber}-text-container`).classList.contains("food-item-1-20-text-container_visible")) {
    foodItemNumber++
  }

  // displaying "reached max items" alert box
  if (foodItemNumber > foodItemsMax) {
    document.querySelector(".alert-box-max-items").classList.add("alert-box_visible");
    document.querySelector(".alert-box-max-items").classList.remove("alert-box_hidden");
  } else {
    document.querySelector(".alert-box-max-items").classList.remove("alert-box_visible");
    document.querySelector(".alert-box-max-items").classList.add("alert-box_hidden");
  }
  
  // download original photo if thumb === null
  if (photoThumb !== null) {
    document.querySelector(`.food-item-${foodItemNumber}-picture`).src = photoThumb;
  } else {
    document.querySelector(`.food-item-${foodItemNumber}-picture`).src = photoOriginal;
  }

  // changing serving to servings at Food Items section
  if(updatedAmountOfServings === 1) {
    document.querySelector(`.food-item-${foodItemNumber}-text-container-servings__text`).textContent = "serving";
  } else {
    document.querySelector(`.food-item-${foodItemNumber}-text-container-servings__text`).textContent = "servings";
  }
  
  // toggling visible and hidden classes for items in My Totals
  document.querySelector(`.food-item-${foodItemNumber}-picture`).classList.add("food-item-1-20-picture_visible");
  document.querySelector(`.food-item-${foodItemNumber}-picture`).classList.remove("food-item-1-20-picture_hidden");
  document.querySelector(`.food-item-${foodItemNumber}-text-container`).classList.add("food-item-1-20-text-container_visible");
  document.querySelector(`.food-item-${foodItemNumber}-text-container`).classList.remove("food-item-1-20-text-container_hidden");
  document.querySelector(`.food-item-${foodItemNumber}-bin`).classList.add("food-item-1-20-bin_visible");
  document.querySelector(`.food-item-${foodItemNumber}-bin`).classList.remove("food-item-1-20-bin_hidden");
  document.querySelector(`.food-item-${foodItemNumber}-text-container-title`).textContent = itemNameFirstLetterCapitalized;
  document.querySelector(`.food-item-${foodItemNumber}-text-container-servings__value`).textContent = updatedAmountOfServings;
  document.querySelector(`.food-item-${foodItemNumber}-text-container-calories__value`).textContent = itemCalories * updatedAmountOfServings;
  
  calculatingTotalCalories();

  // hiding right pagination button if there is no content for next page 
  if (
      (foodItemsPageCurrent === 1 && foodItemNumber > 5) || 
      (foodItemsPageCurrent === 2 && foodItemNumber > 10) || 
      (foodItemsPageCurrent === 3 && foodItemNumber > 15) 
    ) {
    document.querySelector(`.food-pagination-right-button`).classList.remove("food-pagination-right-button_hidden");
    document.querySelector(`.food-pagination-right-button`).classList.add("food-pagination-right-button_visible");
    } else {
    document.querySelector(`.food-pagination-right-button`).classList.add("food-pagination-right-button_hidden");
    document.querySelector(`.food-pagination-right-button`).classList.remove("food-pagination-right-button_visible");
  }

  foodItemsMaxPageOpenedVariableCorrecting();
  keepDisplayingRightPaginationButton();

  while (document.querySelector(`.food-item-${foodItemNumber}-text-container`).classList.contains("food-item-1-20-text-container_hidden")) {
    foodItemNumber--
  }

  // clicking Remove From My Totals button
  document.querySelector(`.food-item-${foodItemNumber}-bin`).addEventListener("click", function() {

    document.querySelector(`.food-item-${foodItemNumber}-picture`).classList.add("food-item-1-20-picture_hidden");
    document.querySelector(`.food-item-${foodItemNumber}-picture`).classList.remove("food-item-1-20-picture_visible");
    document.querySelector(`.food-item-${foodItemNumber}-text-container`).classList.add("food-item-1-20-text-container_hidden");
    document.querySelector(`.food-item-${foodItemNumber}-text-container`).classList.remove("food-item-1-20-text-container_visible");
    document.querySelector(`.food-item-${foodItemNumber}-bin`).classList.add("food-item-1-20-bin_hidden");
    document.querySelector(`.food-item-${foodItemNumber}-bin`).classList.remove("food-item-1-20-bin_visible");

    calculatingTotalCalories();
    foodItemsMaxPageOpenedVariableCorrecting();
    keepDisplayingRightPaginationButton();

  });

});