Как обратиться к одной функции, когда есть 4 одинаковых div

Question

Подскажите пожалуйста есть 4 одинаковых блока, выбор товара. И рабочий js код НО он работает только для одного блока. Допустим я выбираю количество с 3-го блока а количество записывает в 1 блок. Мне нужно что бы с какого блока выбрал туда и записалось количество, с 1-го в 1-й, со 2-го во 2-й и т.д Просьба, скиньте готовый js, я в нем пока не селен( а для верстки нужно

let inputValue = document.querySelector(".input-value");
let inputArray = document.querySelectorAll(
  ".input-array .item .background-item"
);

inputArray.forEach((x) => {
  x.addEventListener("click", (e) => {
    inputValue.value = e.target.innerText;
  });
});

<div class="shopping-menu input-wrapper">
  <span class="icon"></span>
  <input class="input-value" type="text" value="3" />
  <div class="input-array">
    <span class="item"> <b class="background-item">1</b></span>
    <span class="item"> <b class="background-item">2</b></span>
    <span class="item"> <b class="background-item">3</b></span>
    <span class="item"> <b class="background-item">4</b></span>
    <span class="item"> <b class="background-item">5</b></span>
    <span class="item"> <b class="background-item">6</b></span>
    <span class="item"> <b class="background-item">7</b></span>
    <span class="item"> <b class="background-item">8</b></span>
    <span class="item"> <b class="background-item">9</b></span>
    <span class="item"> <b class="background-item">10</b></span>
  </div>
  <input type="submit" value="" class="btn" />
</div>

Answer 1

В чисто JS не силен, но вот такой быдло код тебе поможет. А вот как это сделать красивым кодом, я не подскажу :) Логика такая, что ты от e.target - тоесть от нажатого b идешь 3 раза вверх по его родителям приходишь к "shopping-menu input-wrapper" и в нем ищешь ".input-value" и именно ему задаешь value

let inputValue = document.querySelector(".input-value");
let inputArray = document.querySelectorAll(
  ".input-array .item .background-item"
);

inputArray.forEach((x) => {
  x.addEventListener("click", (e) => {
    e.target.parentElement.parentElement.parentElement.querySelector(".input-value").value = e.target.innerText;
  });
});

<div class="shopping-menu input-wrapper">
  <span class="icon"></span>
  <input class="input-value" type="text" value="3" />
  <div class="input-array">
    <span class="item"> <b class="background-item">1</b></span>
    <span class="item"> <b class="background-item">2</b></span>
    <span class="item"> <b class="background-item">3</b></span>
    <span class="item"> <b class="background-item">4</b></span>
    <span class="item"> <b class="background-item">5</b></span>
    <span class="item"> <b class="background-item">6</b></span>
    <span class="item"> <b class="background-item">7</b></span>
    <span class="item"> <b class="background-item">8</b></span>
    <span class="item"> <b class="background-item">9</b></span>
    <span class="item"> <b class="background-item">10</b></span>
  </div>
  <input type="submit" value="" class="btn" />
</div>

Answer 2

Можно повесить обработчик на родителя, и проверять, на кого кликнули.
Называется «Делегирование событий».

let menuList = document.querySelectorAll('.shopping-menu');

menuList.forEach(function(menu) {
  menu.addEventListener('click', function(e) {
    if ( e.target.classList.contains('background-item') ) {
      let input = this.querySelector('.input-value');
               // this → ссылается на menu
      input.value = e.target.textContent;
    }
  });
});

b { display: inline-block; width: 20px; padding: 4px; margin: 4px; background: orange; cursor: pointer; } b:active { background: #f36700; }

<div class="shopping-menu input-wrapper">
  <input class="input-value">
  <div class="input-array">
    <span class="item"><b class="background-item">1</b></span>
    <span class="item"><b class="background-item">2</b></span>
    <span class="item"><b class="background-item">3</b></span>
  </div>
</div>

<div class="shopping-menu input-wrapper">
  <input class="input-value">
  <div class="input-array">
    <span class="item"><b class="background-item">1</b></span>
    <span class="item"><b class="background-item">2</b></span>
    <span class="item"><b class="background-item">3</b></span>
  </div>
</div>

БЛОГ НА HUSL

Как обратиться к одной функции, когда есть 4 одинаковых div

Ответы (2 шт):