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
2 answers
solution1
1 ACCPTED 2022-06-02 10:26:45
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">
solution2
0 2022-06-02 10:29:16
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.