Me falta algo, probablemente relacionado con bind , pero no puedo ver qué ni dónde. Puedo agregar una clase a una etiqueta de cuerpo, pero no puedo eliminarla después.
const add_body_class = document.querySelectorAll('.btn-add-class'); add_body_class.forEach(item => { item.addEventListener('click', event => { document.body.classList.add('foobar'); }) }); const remove_body_class = document.querySelectorAll('.btn-remove-class'); remove_body_class.forEach(item => { item.addEventListener('click', event => { // this doesn't work document.body.classList.remove('foobar'); // click event works console.log("clicked"); }) }); Por cierto, necesito usar múltiples selectores y document.querySelectorAll debido a múltiples instancias, y no puedo cambiar ninguno de los códigos HTML.
¡Cualquier ayuda sería apreciada!
Funciona bien para mí, simplemente lo envolví dentro de un oyente DOMContentLoaded.
<!DOCTYPE html> <html> <body> <button class="btn-add-class">Add</button> <button class="btn-add-class">Add</button> <button class="btn-add-class">Add</button> <hr> <button class="btn-remove-class">Remove</button> <button class="btn-remove-class">Remove</button> <button class="btn-remove-class">Remove</button> </body> <style> .foobar{ background-color: yellow; } </style> <script> document.addEventListener("DOMContentLoaded", () => { const add_body_class = document.querySelectorAll('.btn-add-class'); add_body_class.forEach(item => { item.addEventListener('click', event => { document.body.classList.add('foobar'); console.log("added"); }) }); const remove_body_class = document.querySelectorAll('.btn-remove-class'); remove_body_class.forEach(item => { item.addEventListener('click', event => { // this doesn't work document.body.classList.remove('foobar'); // click event works console.log("removed"); }) }); }) </script> </html>