我正在使用一些 javascript 代碼，并且我有一個具有相同類名的按鈕串列，但我想知道單擊其中的哪個按鈕以獲取值。我怎么能用香草js做到這一點？這是示例代碼
<button onclick="chooseRating()" id="rateBtn" class="rateBtn" value="1">1</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="2">2</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="3">3</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="4">4</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="5">5</button>
我試過的js代碼是
const rateBtn = document.getElementsByClassName("rateBtn");
function chooseRating() {
for (rate in rateBtn) {
console.log(rateBtn[rate]);
if (rateBtn[rate].clicked === true) {
rating = rateBtn[rate].value;
console.log(rating);
//shows 5 don't know why
}
}
}
uj5u.com熱心網友回復：
let myBtns=document.querySelectorAll('.rateBtn');
myBtns.forEach(function(btn) {
btn.addEventListener('click', () => {
console.log(this.value)
});
});
uj5u.com熱心網友回復：
您應該首先為每個按鈕定義一個特定的id 。
此外，您可以將該值作為引數傳遞給 onClick 方法。
例如：
<button onclick="chooseRating(this)" id="rateBtn1" class="rateBtn" value="1">1</button>
<button onclick="chooseRating(this)" id="rateBtn2" class="rateBtn" value="2">2</button>
<button onclick="chooseRating(this)" id="rateBtn3" class="rateBtn" value="3">3</button>
<button onclick="chooseRating(this)" id="rateBtn4" class="rateBtn" value="4">4</button>
<button onclick="chooseRating(this)" id="rateBtn5" class="rateBtn" value="5">5</button>
然后，您可以從 vanilla javascript 代碼中獲取 HTML 按鈕的 ID 和值：
function chooseRating(e) {
console.log(`my ID is ${e.id}, and my value is ${e.value}`);
}
uj5u.com熱心網友回復：
HTML：
<button onclick="chooseRating()" id="rateBtn" class="rateBtn" value="1">1</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="2">2</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="3">3</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="4">4</button>
<button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="5">5</button>
索引.js：
function chooseRating(e) {
console.log (e.value);
}
你可以在這個中看到更多
uj5u.com熱心網友回復：
<button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="1">
1
</button>
<button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="2">
2
</button>
<button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="3">
3
</button>
<button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="4">
4
</button>
<button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="5">
5
</button>
function myFunction(val) { console.log(val);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/445774.html
標籤：javascript html 事件处理