我在 html 中有三個按鈕：
<button value="Rock" onclick="displayResult()">Rock</button>
<button value="Paper" onclick="displayResult()">Paper</button>
<button value="Scissors" onclick="displayResult()">Scissors</button>
在displayResult()函式中（為 3 撰寫一次），如何從單擊的按鈕中獲取值？如果我為所有 3 個按鈕設定 id，我必須撰寫 3 個顯示函式來從單獨的按鈕獲取值：
let displayResultForRock = () => {
let value = document.getElementById('rock').value;
}
uj5u.com熱心網友回復：
只需將事件偵聽器附加到按鈕，然后記錄textContent每個按鈕。
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', handleClick, false);
});
function handleClick() {
console.log(this.textContent);
}<button>Rock</button>
<button>Paper</button>
<button>Scissors</button>或使用事件委托：
const buttons = document.querySelector('#buttons');
buttons.addEventListener('click', handleClick, false);
function handleClick(e) {
if (e.target.matches('button')) {
console.log(e.target.textContent);
}
}<div id="buttons">
<button>Rock</button>
<button>Paper</button>
<button>Scissors</button>
</div>uj5u.com熱心網友回復：
請使用此代碼。您可以displayResult像這樣更新您的功能。
function displayResult(event) {
console.log(event.target.value)
}<button value="Rock" onclick="displayResult(event)">Rock</button>
<button value="Paper" onclick="displayResult(event)">Paper</button>
<button value="Scissors" onclick="displayResult(event)">Scissors</button>uj5u.com熱心網友回復：
const btns = document.querySelectorAll("button")
btns.forEach(b => b.onclick = e => result.innerText = e.target.value)<button value="Rock">Rock</button>
<button value="Paper">Paper</button>
<button value="Scissors">Scissors</button>
<div id="result"></div>uj5u.com熱心網友回復：
為什么不將值作為引數傳遞給函式，如下所示：
<button value="Rock" onclick="displayResult("Rock")">Rock</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/461780.html
標籤：javascript html 按钮