function myFunction() { if(rock == true){console.log("dd")} } <div class="overview"> <div class="userSide"> <h4>User:</h4><span> </span> <img id="userImg" src="img/Paper.png" style="width: 220px; height: 220px;"> </div> <div class="compSide"> <h4>CPU:</h4><span> </span> <img id="compImg" src="img/Paper.png" style="width: 220px; height: 220px;"> </div> </div> <div class="userBTN"> <button id="rock" onclick="myFunction()">Rock</button> <button id="paper" onclick="myFunction()">Paper</button> <button id="scissors" onclick="myFunction()">Scissors</button> </div>Una manera fácil... haz que tu función tome un argumento como:
function myFunction(whichOne) { if(whichOne == "rock"){console.log("dd")} }y luego llamar a cada uno con el valor correcto:
<div class="userBTN"> <button id="rock" onclick="myFunction('rock')">Rock</button> <button id="paper" onclick="myFunction('paper')">Paper</button> <button id="scissors" onclick="myFunction('scissors')">Scissors</button> </div>Podrías hacerlo de la siguiente manera:
window.onload = () => { const clickHandler = (e) => { switch (e.target.dataset.rps) { case "rock": console.log('🗿'); break; case "paper": console.log('📃'); break; case "scissors": console.log('✂️'); break; default: console.log('undefined'); } }; document.querySelectorAll('button[data-rps]').forEach(it => it.addEventListener('click', clickHandler)); } <div class="userBTN"> <button data-rps="rock">Rock</button> <button data-rps="paper">Paper</button> <button data-rps="scissors">Scissors</button> </div>Siento que trabajar con el atributo de datos en lugar de la identificación es mejor cuando se trabaja con este tipo de funcionalidad. Porque no está limitado a una identificación específica . Básicamente, podría copiar ese componente y colocarlo en otro lugar y seguiría funcionando.
En este caso específico, solo tiene que administrar 3 ID, pero si desea ampliar la funcionalidad , es fácil agregar rápidamente otro atributo de datos en su lugar (en general) y no tiene que reconstruir la lógica, porque usa el mismo conjunto de datos de nuevo.
Además, puede evitar agregar el controlador onClick tres veces y usar un selector más general para producir html limpio y evitar el código repetitivo .
Los data-rps de atributos de datos proporcionados se pueden usar para determinar el tipo.
e.target se refiere al objetivo del evento, que es el elemento que ha activado el evento onClick.
agregar un atributo de datos.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
<button data-name="rock" id="rock" onclick="myFunction">rock</button> ...y puede verificar si está seleccionado con:
function myFunction(event) { if (event.target.dataset.name === "rock") { // do something...... } }O puede verificar su identificación.
if (event.target.id === 'rock') { // do something }Pero se ve semánticamente más limpio si le das un atributo de datos si miras el archivo HTML.