CODEWITHSUNDEEP
javascript
Christopher Aguilar
Christopher Aguilar

Reputation: 11

Multiple buttons using same function

I have multiple buttons I would like to increment a value in different corresponding inputs. I am able to get all the buttons working but they only effect the first input. I realize I can write out three different functions for each button but I know there is a way to utilize one function. Thank you for any help in advance!

Here is code for reference:

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>

Upvotes: 1

Views: 2456

Answers (2)

Nikita Chayka
Nikita Chayka

Reputation: 2135

That's how i would do it - basically in your "submit" buttons you create attribute (in this case "for" (see EDIT)) that will point to id of input to be incremented. This gives you full flexibility, no matter what html you have.

EDIT

Better use custom attribute, for example data-for, button doesn't have for attribute, as pointed in the comments below

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>

Upvotes: 2

epascarello
epascarello

Reputation: 207557

Select the next sibling and select the input.

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>

Upvotes: 2

Related Questions