const divs_demo = document.querySelectorAll('.common'); const display_texts = document.querySelectorAll('.text'); for(let div_demo of divs_demo){ div_demo.addEventListener('click', ()=>{ for(let display_text of display_texts){ display_text.style.display = 'block'; }; }); }; .text{ display: none; } .common{ border: 1px solid; } <body> <div class="common"> <h1>Text one</h1> <p class="text">Hello</p> </div> <div class="common"> <h1>Text two</h1> <p class="text">Good morning</p> </div> <div class="common"> <h1>Text three</h1> <p class="text">Lets code</p> </div> <script src="app.js"></script> </body>Estoy trabajando con controladores de eventos en JavaScript, sin embargo, encontré un problema en mi camino, en el código anterior, tengo acceso a todos los elementos div en mi html, y algún texto oculto que quiero que se muestre una vez que el se realiza el controlador de eventos que he pasado a los divs, pero una vez que se hace clic en un div, muestra todo el texto, incluido el de los otros divs, pero mi objetivo es mostrar solo el texto en el div en el que se hace clic. ¿Hay alguna manera de hacerlo sin repetir el mismo código en cada div?
¿Quieres decir esto?
const divs_demo = document.querySelectorAll('.common'); const display_texts = document.querySelectorAll('.text'); for (let div_demo of divs_demo) { div_demo.addEventListener('click', () => { div_demo.querySelector(".text").style.display = 'block'; }); }; .text{ display: none; } .common{ border: 1px solid; } <body> <div class="common"> <h1>Text one</h1> <p class="text">Hello</p> </div> <div class="common"> <h1>Text two</h1> <p class="text">Good morning</p> </div> <div class="common"> <h1>Text three</h1> <p class="text">Lets code</p> </div> <script src="app.js"></script> </body>¿Hay alguna manera de hacerlo sin repetir el mismo código en cada div?
Sí, hay que es event-delegation
document.addEventListener('click',(e)=>{ e.target.parentElement.querySelector('.text').style.display = 'block'; }) .text { display: none; } .common { border: 1px solid; } <body> <div class="common"> <h1>Text one</h1> <p class="text">Hello</p> </div> <div class="common"> <h1>Text two</h1> <p class="text">Good morning</p> </div> <div class="common"> <h1>Text three</h1> <p class="text">Lets code</p> </div> <script src="app.js"></script> </body>Los textos que se muestran son elementos secundarios de la demostración de divs, por lo que simplemente puede hacer clic en el elemento secundario .text del div. Así es como lo haría.
const divsDemo = document.querySelectorAll('.common'); for (let divDemo of divsDemo) { divDemo.addEventListener('click', () => { const clickedText = divDemo.querySelector('.text'); clickedText.style.display = 'block'; }); } .text{ display: none; } .common{ border: 1px solid; } <body> <div class="common"> <h1>Text one</h1> <p class="text">Hello</p> </div> <div class="common"> <h1>Text two</h1> <p class="text">Good morning</p> </div> <div class="common"> <h1>Text three</h1> <p class="text">Lets code</p> </div> <script src="app.js"></script> </body> NOTA: Es muy recomendable que respetes los estándares de estilo del lenguaje que estás programando. En este caso, debe usar la denominación camelCase para las variables.
NOTA 2: en lugar de modificar el estilo, le recomendaría usar clases de utilidad como:
.invisible { display: none }Y luego agregar o eliminar esta clase del elemento que desea que desaparezca