Estoy luchando con esta tarea: fije un detector de eventos a los botones. Cree una función que se llame cuando se haga clic en uno de los botones. Verifique esto con un archivo console.log. Asegúrese de que el evento de clic se pase a esta función. Asegúrese de tener acceso al valor del botón en el que se hizo clic en esta función. Verifique esto con console.log. El resultado que desea ver en la consola al hacer clic es: leopardo, león, elefante, rinoceronte o búfalo.
fiveButtons = document.getElementsByClassName("big-five-button"); for (var i = 0; i < fiveButtons.length; i++) { fiveButtons[i].addEventListener("click", function () { Array.from(fiveButtons).forEach(function (nameButton) { console.log(nameButton.innerHTML); }) }); }Esto es lo que escribí hasta ahora. Cuando hago clic en el botón ahora, el resultado es el texto de todos los botones. Si bien quiero que el resultado sea solo "León" después de hacer clic en el botón león.
<h1>The Big Five</h1> <ul class="big-five-list"> <li class="big-five-list-item"> <button class="big-five-button">Lion</button> </li> etc.al crear un addEventListener, puede usar el objeto de evento para apuntar al elemento en el que se hizo clic, así:
fiveButtons[i].addEventListener("click", function (event) { console.log(event.target.innerHTML); });Puede cambiar el botón para incluir una función onclick como la siguiente:
https://www.w3schools.com/jsref/event_onclick.asp
<!DOCTYPE html> <html> <body> <button onclick="myFunction('Lion')">Lion</button> <input type="text" value="" id="getValue"> <p id="demo"></p> <script> function myFunction(value) { document.getElementById("getValue").value = value; } </script> </body> </html>La función onclick tendrá un valor dentro de () para el nombre de la función. Esto pasará el valor que desea a través de la función y se puede llamar como desee. El fragmento anterior muestra un ejemplo de cómo se puede utilizar
EDITADO
// Get all the buttons const fiveButtons = document.getElementsByClassName("big-five-button"); // Iterate through the collection of buttons // Here is let i = 0 instead of var i = 0, since var has functional scope and let has block scope // If we used var i = 0 it would not work implicitly because i would exist in the scope of a function, // and all the event handlers (for each button) would share the same value of i for (let i = 0; i < fiveButtons.length; i++) { // For each button register event handler fiveButtons[i].addEventListener("click", _ => { // When button is clicked this part of a code is being called // Because of javascript CLOSURE, it remembers the i value console.log(fiveButtons[i].innerHTML) });}
Si esto no es comprensible, lea sobre cierres en javascript.