Несколько кнопок, использующих одну и ту же функцию

#javascript

Вопрос:

У меня есть несколько кнопок, я хотел бы увеличить значение в разных соответствующих входных данных. Я могу заставить все кнопки работать, но они влияют только на первый ввод. Я понимаю, что могу выписать три разные функции для каждой кнопки, но я знаю, что есть способ использовать одну функцию. Заранее благодарим вас за любую помощь!

Вот код для справки:

 let submit = document.querySelectorAll(".submit");
let num = document.querySelector(".num");

submit.forEach((btn)=>{
  btn.addEventListener("click", increment);
});

let value = 0;

function increment(){
  value  =1;
  num.value = value;
}

 <div class="container">

  <div class="main">

    <button class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"></input>     </div>

    <button class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"></input>     </div>

    <button class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"></input>     </div>

  </div>

</div>

Развернуть фрагмент

1. В вашей функции должна быть event переменная increment() . У этого события есть target поле. Попробуйте установить идентификатор для каждой кнопки и идентифицировать цель с помощью этого идентификатора.

2. выберите следующий родственный

3. И <input/> теги самозакрываются, <input></input> недопустимый HTML

Ответ №1:

Выберите следующего родственного брата и выберите ввод.

 const submit = document.querySelectorAll(".submit");

submit.forEach((btn) => {
  btn.addEventListener("click", increment);
});

function increment() {
  const inp = this.nextElementSibling.querySelector("input");
  inp.value = Number(inp.value)   1;
}

 <div class="container">

  <div class="main">

    <button type="button" class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"> </div>

    <button type="button" class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"> </div>


    <button type="button" class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"> </div>

  </div>

</div>

Развернуть фрагмент

Ответ №2:

Вот как я бы это сделал — в основном в ваших submit кнопках «» вы создаете атрибут (в данном случае « for » (см. Редактирование)), который будет указывать на id input подлежащий увеличению. Это дает вам полную гибкость, независимо от того, какой у вас html.

Редактировать

Лучше использовать пользовательский атрибут, например data-for , кнопка не имеет for атрибута, как указано в комментариях ниже

 let submit = document.querySelectorAll(".submit");


submit.forEach((btn)=>{
  btn.addEventListener("click", increment);
});



function increment(ev){
  let targetInputId = ev.target.getAttribute("data-for");
  let targetInput = document.getElementById(targetInputId);
  
  targetInput.value = parseInt(targetInput.value)   1;
}

 <div class="container">

  <div class="main">

    <button data-for="num1" class="submit">Submit</button>
    <div class="withinDiv"><input id="num1" type="number" class="num" value="0"></input>     </div>

    <button data-for="num2" class="submit">Submit</button>
    <div class="withinDiv"><input id="num2" type="number" class="num" value="0"></input>     </div>

    <button data-for="num3" class="submit">Submit</button>
    <div class="withinDiv"><input id="num3" type="number" class="num" value="0"></input>     </div>

  </div>

</div>

Развернуть фрагмент

1.Кнопки не имеют for атрибута, но вы можете использовать пользовательский data-foobar (заменить foobar более значимым именем)

2. У них нет, но вы все равно можете его использовать, и да, я бы сделал «данные для» на самом деле, просто, знаете ли, набрал прямо из них head — в любом случае «просто для примера».

3. То, что вы можете , не означает, что вы должны писать или советовать людям писать недопустимый HTML

4. Хорошо, позвольте мне это исправить

5. Я вижу, что меня избили 🙂 Я действительно считаю, что это лучшее решение, поскольку оно не сломается, если в HTML будет добавлено больше братьев и сестер.