Multiple buttons using same function

Question

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>

You should have a event variable coming in your increment() function. This event has a target field. Try to set an ID per button and identify the target with this ID. — MetallimaX
– MetallimaX, Commented Dec 14, 2020 at 18:07
And <input/> tags are self-closing, <input></input> is not valid HTML — blex
– blex, Commented Dec 14, 2020 at 18:10

epascarello · Accepted Answer · 2020-12-14 18:14:26Z

2

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>

answered Dec 14, 2020 at 18:14

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christopher Aguilar Over a year ago

This worked, I need to familiarize myself with children and siblings and this. Thanks again!

Nikita Chayka · Accepted Answer · 2020-12-14 18:31:41Z

2

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>

edited Dec 14, 2020 at 18:31

answered Dec 14, 2020 at 18:21

Nikita Chayka

2,14512 silver badges16 bronze badges

6 Comments

blex Over a year ago

Buttons don't have a for attribute, but you can use a custom data-foobar (replace foobar with a more meaningful name)

Nikita Chayka Over a year ago

They don't have, yet you still can use it, and yes, i would do "data-for" actually, just, you know, typed right from them head - anyway "just for example"

blex Over a year ago

Just because you can, does not mean you should write or advise people to write invalid HTML

Nikita Chayka Over a year ago

Ok, let me fix that

Peter Rasmussen Over a year ago

I see I was beat to it :) I do believe this is a better solution as it does not break if more siblings are added to the HTML.

|

Collectives™ on Stack Overflow

Multiple buttons using same function

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related