Tengo tres botones en html:
<button value="Rock" onclick="displayResult()">Rock</button> <button value="Paper" onclick="displayResult()">Paper</button> <button value="Scissors" onclick="displayResult()">Scissors</button>En la función displayResult() (escrita una vez por 3), ¿cómo puedo obtener valor del botón en el que hago clic? Si configuro ID para los 3 botones, tengo que escribir 3 funciones de visualización para obtener el valor de un botón separado:
let displayResultForRock = () => { let value = document.getElementById('rock').value; }Simplemente adjunte detectores de eventos a los botones y luego registre el textContent de texto de cada uno.
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>O use la delegación de eventos :
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>Utilice este código. puede actualizar su función displayResult de esta manera.
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> 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>