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

// 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();

  });

});

Почему map ничего не возвращает, а mergeMap возвращает ошибку?

спасибо, уже разобрался. forEach на map поменял

Как стилизировать элементы массива в ангулар?

Разобрался, вдруг кому-нибудь понадобится.

https://riptutorial.com/angular2/example/32251/-ng...

Как стилизировать элементы массива в ангулар?

Добавил html и css компонента, на ts ругается

https://codepen.io/bohdanov90/pen/dyoBYKa

Как стилизировать элементы массива в ангулар?

без изменений:(

Как передать массив из компонента в компонент а angular2+?

Антон Швец, я вас правильно понимаю, в сервисе создаю subject, в конструкторе компонента1 subject.next, в конструкторе компонента2 subject.subscribe?

Как передать массив из компонента в компонент а angular2+?

Массив не будет расти, у каждого элемента есть булеан свойство checked, только оно будет меняться по клику на чекбокс.

Как передать массив из компонента в компонент а angular2+?

Спасибо, буду разбираться, но нужно решить максимально быстро задачу, другие способы возможны?

Как сгруппировать селекторы классов вместе?

А как сгруппировать если разница в именах классов в середине? Например,
.item-1-description
.item-2-description

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

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

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

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

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

Первая функция нужна для того, чтобы когда 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 функций?

Как сравнить символ с каждым символом из массива?

особенно эту часть:
(acc[n] = (acc[n] || 0) + 1

Как сравнить символ с каждым символом из массива?

почитал о .reduce(), оно вроде используется для сложения элементов массива. Вы не могли бы объяснить эту строку:
count = arr.reduce((acc, n) => (acc[n] = (acc[n] || 0) + 1, acc), {});

Как сравнить символ с каждым символом из массива?

https://www.codewars.com/kata/54b42f9314d9229fd600...

Как объединить текст и переменную в имя переменной?

Все было просто)) и массив уже был, но ума не хватило) спасибо!

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

Я видимо не весь кусок кода указал:

// setting new final score
function settingFinalScore() {
  newFinalScore = +prompt("Please set new Final Score", 100);
  finalScore = newFinalScore;
  alert(newFinalScore);  
  alert(finalScore);
}

document.querySelector(".aside__set-final-score").addEventListener("click", settingFinalScore);

Эта функция вызывается по клику на ссылку, вызывается форма, ввожу новое значение, алерты работают. После этого обе переменные undefined.

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

Переменные были определены вначале кода, не указал это

Как выровнять 3 видео по центру страницы (все они будут на одной горизонтали)?

Все равно не работает)

<!-- My Media start-->
	
	<h2 align="center"><a name="My Media"> My Media </a></element></h2>
	
		<article style="width:100%; display:flex; justfiy-content:space-beetwen; align-items:center; margin:0 auto";>
			<table>
				<tr>
					<td>
						<section>
							<iframe src="https://www.youtube.com/embed/Q6_5InVJZ88" allowfullscreen frameborder="0" style="margin:30px"></iframe>
						</section>
					</td>
					<td>
						<section>
							<iframe src="https://www.youtube.com/embed/Q6_5InVJZ88" allowfullscreen frameborder="0" style="margin:30px"></iframe>
						</section>
					</td>
					<td>
						<aside>
							<iframe src="https://www.youtube.com/embed/Q6_5InVJZ88" allowfullscreen frameborder="0" style="margin:30px"></iframe>
						</aside>
					</td>
				</tr>
			</table>
		</article>
		
	<!-- My Media end-->

Как выровнять 3 видео по центру страницы (все они будут на одной горизонтали)?

Рустам Байназаров, это просто кусок кода, в нем я использовал тег table, чтобы расположить видео горизонтально. По другому не умею)