所以我為我的輸入按鈕制作了這個公式
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()">
我的問題是，每當我單擊一個按鈕時，什么都沒有發生，然后我再次單擊它，它會在控制臺中顯示值，但也會顯示 (3)，因為它會遍歷所有按鈕
像這樣
如果我單擊一個按鈕，它將顯示值 3，但是如果我單擊下一個按鈕，它會將值更改為僅顯示 5。
基本上制作一個小費按鈕選項，并希望人們選擇他們的小費
uj5u.com熱心網友回復：
在第一次單擊按鈕時的第一次呼叫之前，您不會添加偵聽addTip器（然后在每次單擊之后添加新的偵聽器）。
相反，只需呼叫addTip()您的 javascript 并將其從onClick每個按鈕上洗掉即可。
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">事件委托
更簡潔的解決方案是使用事件委托。此處Element.matches()用于檢查是否已單擊相關按鈕，然后記錄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">uj5u.com熱心網友回復：
嘗試這個 ：
<!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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/487471.html
標籤：javascript html 按钮 输入
下一篇：與CSS按鈕影片作斗爭