Estoy aprendiendo Javascript y mi proyecto contiene 3 botones que abren un modal. Todo funciona bien, sin embargo, quiero reutilizar el modal y reemplazar el texto modal según el botón en el que se haga clic.
Mi HTML está a continuación:
<body> <button class="show-modal" id="btn-1">Show modal 1</button> <button class="show-modal" id="btn-2">Show modal 2</button> <button class="show-modal" id="btn-3">Show modal 3</button> <div class="modal hidden"> <button class="close-modal">×</button> <h1>Modal Header Content</h1> <p class="hidden btn-1 text"> This is modal 1 text content </p> <p class="btn-2 hidden text">This is modal 2 text</p> <p class="btn-3 hidden text">This is modal 3 text</p> </div> <div class="overlay hidden"></div> <script src="script.js"></script> </body>En mi archivo Javascript, he creado variables para acceder a varias partes del HTML:
// get selector and store in variable for repeated use const modal = document.querySelector('.modal'); const overlay = document.querySelector('.overlay'); const btnCloseModal = document.querySelector('.close-modal'); //since button all have same class of show-modal, have to use querySelectorAll const btnsOpenModal = document.querySelectorAll('.show-modal'); const text = document.querySelectorAll('.text'); console.log(text);Luego, cuando hago clic en el botón, aparece el modal, pero no puedo cambiar el texto. Mi idea era obtener el ID del botón (que obtengo) y, si ese valor está contenido en la lista de clases de elementos, eliminar la clase oculta. Pero no funciona, así que hay algo que no entiendo.
for (let i = 0; i < btnsOpenModal.length; i++) { btnsOpenModal[i].addEventListener('click', function () { // console.log(btnsOpenModal[i].id); console.log(btnsOpenModal[i]); let modalText = btnsOpenModal[i].id; console.log(modalText); if (text.classList.contains(modalText)) { text.classList.remove('hidden'); } modal.classList.remove('hidden'); overlay.classList.remove('hidden'); }); }¡Cualquier ayuda sería apreciada! Tal vez tampoco pueda hacer esto con javascript, lo cual está bien, pero mi instinto me dice que se puede hacer.
¡¡Gracias!!
El problema con su código es que está intentando acceder a la totalidad de la matriz querySelectorAll en lugar del elemento individual que le interesa. Consulte el código a continuación para ver un ejemplo de una forma de resolver esto:
for (let i = 0; i < btnsOpenModal.length; i++) { btnsOpenModal[i].addEventListener('click', function () { let modalText = btnsOpenModal[i].id; if (text[i].classList.contains(modalText)) { text[i].classList.remove('hidden'); } modal.classList.remove('hidden'); overlay.classList.remove('hidden'); }); }