Intento crear un botón de alternar para mostrar/ocultar algún contenido. Por el momento, uso eso:
// test.js var toggle = document.getElementById("toggle"); var content = document.getElementById("content"); toggle.addEventListener("click", function() { content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none"; }); #content { display: none; } <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="test.js"></script> </head> <body> <button id="toggle">Click Me</button> <div id="content">Hello World</div> </body> </html>Si uso este código con codepen o JSFiddle, todo funciona bien, pero cuando lo pruebo localmente (cuando hago clic en mi archivo index.html, lo abro con Firefox u otro navegador) mi botón "Click Me" no funciona. obras.
Cuando hago clic en él, no pasa nada...
¿Alguien que me muestre por qué?
Puede hacer que su función se active en el evento de carga.
posible ejemplo
(function() { var loadedContent = { init: function() { window.addEventListener("load", function(event) { var toggle = document.getElementById("toggle"); var content = document.getElementById("content"); toggle.addEventListener("click", function() { content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none"; }); }); } }; loadedContent.init(); })(); #content { display: none; } <button id="toggle">Click Me</button> <div id="content">Hello World</div>