Quiero manejar varios botones. Mi objetivo es que cuando un usuario haga clic en el first button , se cambie el first paragraph , nuevamente cuando un usuario haga clic en el second button , se cambiará el second paragraph . Lo intenté, pero no funcionó. Por favor revisa mi código y dame una solución....
var len = document.querySelectorAll(".myButton").length var plen = document.querySelectorAll(".myP").length for (i = 0; i < len; i++) { for (j = 0; j < plen; j++) { document.querySelectorAll(".myButton")[i].addEventListener("click", function() { if (document.querySelectorAll(".myButton")[i] == document.querySelectorAll(".myP")[j]) { document.querySelectorAll(".myP")[j].innerHTML = document.querySelectorAll(".myButton")[i].innerHTML; } }); } } <p class="myP">oke</p> <p class="myP">oke</p> <h1 class="pt-3 pb-3 pl-5 pr-5 bg-warning text-light btn mx-5 my-5">00</h1><br> <hr style="background-color:red; width:50%"> <button class="btn bg-primary text-light mx-5 my-5 myButton">one</button> <button class="btn bg-primary text-light mx-5 my-5 myButton">two</button>error:
5_eventListener.html:43 Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML') at HTMLButtonElement.<anonymous> (5_eventListener.html:43:119)Línea de errores:
document.querySelectorAll(".myP")[j].innerHTML = document.querySelectorAll(".myButton")[i].innerHTML;Su código necesita cierres para funcionar y eso es bastante complicado.
En su lugar, delegue: aquí delego desde el documento, pero si los botones tienen un contenedor, puede delegar desde ese
Mucho más simple. También use atributos de datos para dar un objetivo a los botones.
document.addEventListener("click", function(e) { const tgt = e.target; if (!tgt.matches(".myButton")) return document.getElementById(tgt.dataset.target).innerHTML = tgt.innerHTML; }) <p class="myP" id="p1">oke</p> <p class="myP" id="p2">oke</p> <h1 class="pt-3 pb-3 pl-5 pr-5 bg-warning text-light btn mx-5 my-5">00</h1><br> <hr style="background-color:red; width:50%"> <button class="btn bg-primary text-light mx-5 my-5 myButton" data-target="p1">one</button> <button class="btn bg-primary text-light mx-5 my-5 myButton" data-target="p2">two</button>No entiendo por qué necesitará tal cosa, pero, aquí tiene, una versión muy cercana a @mplungjan que es correcta, simplemente no creo que deba escuchar un clic en todo el documento, también lo hizo más legible para principiantes espero
Ejemplo en vivo:
https://jsfiddle.net/dm3bwzgr/
<p id="p1">text 1</p> <p id="p2">text 2</p> <button class="btn" data-target="p1">Button 1</button> <button class="btn" data-target="p2">Button 2</button> <script> // listen to click event on all buttons document.querySelectorAll('.btn').forEach(function(btn) { btn.addEventListener('click', function() { var target = btn.dataset.target var el = document.getElementById(target) // apply button text to target element el.innerHTML = btn.innerHTML; }); }); </script>