Así que estoy trabajando en un proyecto recientemente sobre el juego de piedra, papel o tijera. Estoy atascado en un problema que cuando hago clic en uno de los tres botones (que son piedra, papel o tijera), addEventListener funciona, pero uno de los parámetros reales de una función que estoy pasando como un parámetro para el detector de eventos "la consola dijo que no está definido".
Solo quiero que al hacer clic en el botón pase el valor de ese botón a este parámetro del que estoy hablando.
const rock = document.querySelector('.rock'); const paper = document.querySelector('.paper'); const scissors = document.querySelector('.scissors'); // there are some functions let computerSelection = computerPlay(); rock.addEventListener('click', function(){ playRound(playerSelection, computerSelection); }); paper.addEventListener('click', function(){ playRound(playerSelection, computerSelection);}); scissors.addEventListener('click', function(){ playRound(playerSelection, computerSelection);}); <button class="rock">ROCK</button> <button class="paper">PAPER</button> <button class="scissors">SCISSORS</button>Debe leer el evento en cada oyente de clics y puede extraer el valor del evento mediante ev.target.value :
anyButton.addEventListener('click', function(ev) { playRound(playerSelection, computerSelection, ev.target.value); } Esto, por supuesto, implica que todos sus botones tienen un conjunto de atributos de value .
Como mejora, podría agregar detectores de eventos a la vez sin pasar por cada elemento:
const allButtons = document.querySelectorAll('button') // adjust this per your DOM allButtons.forEach((button) => { button.addEventListener('click', function(ev) { playRound(playerSelection, computerSelection, ev.target.value); }) })Tienes que pasar playSelection de acuerdo con el botón en el que ha hecho clic el jugador:
rock.addEventListener('click', function(){ playRound('rock', computerSelection); }); paper.addEventListener('click', function(){ playRound('paper', computerSelection);}); scissors.addEventListener('click', function(){ playRound('scissors', computerSelection); });Pero tengo una sugerencia para hacer eso con solo un controlador de eventos. Primero tendrás que decir en cada botón qué opción representa. Hágalo usando atributos de datos ( https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes ):
<button class="rock choice-button" data-choice="rock">ROCK</button> <button class="paper choice-button" data-choice="paper">PAPER</button> <button class="scissors choice-button" data-choice="scissors">SCISSORS</button> Tenga en cuenta que agregué una clase choice-button a cada botón, para que pueda acceder a los tres a la vez al agregar el evento:
// there are some functions let computerSelection = computerPlay(); document.querySelectorAll('.choice-button') .forEach(el => el.addEventListener('click', function(event) { playRound(event.target.dataset.choice, computerSelection); })); Primero uso querySelectorAll para encontrar todos los elementos que coincidan con la clase choice-button , luego uso la función forEach para iterar a través de los 3 botones encontrados y agregar el mismo detector de eventos a todos ellos.
Una vez que se ejecuta el detector de eventos, utilicé 'event.target' para obtener acceso al botón en el que se hizo clic y llamé a la propiedad del conjunto de datos para obtener el valor definido en el atributo data-choice .
Sé que puede parecer un poco complicado por solo tres opciones, pero dado que parece que estás aprendiendo javascript, es interesante aprender diferentes enfoques que podrían ayudarte en una situación más compleja.
El error undefined (y dos más que lo siguen una vez que se soluciona el inicial) se debe a que está haciendo referencia a una función que no se ha declarado:
let computerSelection = computerPlay(); // computerPlay() is not defined; Si crea la función computerPlay() , el error desaparecerá pero aparecerá uno nuevo porque playRound() tampoco está definido. Nuevamente, la función debe declararse si se hace referencia a ella (aunque, en este caso, hoisting permite declararla después de la llamada).
Cuando eso se soluciona, el último error surge por la referencia a playerSelection ya que, nuevamente, esto no se ha declarado. Suponiendo que el valor de playerSelection sea piedra, papel o tijera, debe extraerlo del evento de clic.
El controlador de eventos necesita extraer el valor de la propiedad innerText del target del evento. Dentro de sus oyentes de eventos, necesita:
playerSelection = event.target.innerText;