Get Value of Input Button When Clicked for Only One Button?

Question

So I made this formula for my input button

function addTip() {
  let tip = document.querySelectorAll("input[type=button]");

  tip.forEach((item) => {
    item.addEventListener("click", (event) => {
      console.log(item.value);
    });
  });
}

HTML

<input type="button" value="3" onClick="addTip()">
<input type="button" value="5" onClick="addTip()">
<input type="button" value="7" onClick="addTip()">

My problem is whenever I click on a button once, nothing happens, then I click it again and it shows in the console the value but also shows (3) because it goes through all the buttons

like this

How do I make it to where if I click on one button it will show value 3, but then if I click on the next button it will change the value to show 5 only.

Basically making a tip button option and want people to choose their tip

You're not adding listeners until the first `addTip` call which will be on the first button click (and then adding new listeners on every click after). Instead just call `addTip()` in your javascript and remove it from the `onClick` on each button. Better yet use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation#:~:text=Event%20delegation%20is%20handling%20an,on%20elements%20within%20the%20container.) — pilchard, Jun 02 '22 at 10:22

score 1 · Accepted Answer · answered Jun 02 '22 at 10:26

You're not adding listeners until the first addTip call which will be on the first button click (and then adding new listeners on every click after).

Instead just call addTip() in your javascript and remove it from the onClick on each button.

function addTip() {
  let tip = document.querySelectorAll("input[type=button]");

  tip.forEach((item) => {
    item.addEventListener("click", (event) => {
      console.log(item.value);
    });
  });
}

addTip(); // <-- call addTip() once in the js

<input type="button" value="3">
<input type="button" value="5">
<input type="button" value="7">

Event delegation

A cleaner solution is to use event delegation. Here using Element.matches() to check if a relevant button has been clicked and then logging the event.target.value.

document.addEventListener("click", (event) => {
  if (event.target.matches("input[type=button]")){
      console.log(event.target.value);
  }
});

<input type="button" value="3">
<input type="button" value="5">
<input type="button" value="7">

so if I have an html p tag with the id of "tip" how would I display the value using this function? I tried to put `tip = event.target.value` then create another document.getEleByID('tip') and set it to tip but it didn't update the html with the tip value — makerbaker, Jun 02 '22 at 10:40
`document.getElementById('tip').textContent = event.target.value;` You need to set either the [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) or [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) attribute of the retrieved element. — pilchard, Jun 02 '22 at 10:42

score 0 · Answer 2 · answered Jun 02 '22 at 10:29

try this :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<input type="button" value="3">
<input type="button" value="5">
<input type="button" value="7">
<script >
    function addTip() {
      let tip = document.querySelectorAll("input[type=button]");
    
      tip.forEach((item) => {
        item.addEventListener("click", (event) => {
          console.log(item.value);
        });
      });
    }
    
    addTip()
    </script>
</body>
</html>

Get Value of Input Button When Clicked for Only One Button?

2 Answers2

Event delegation