Esta es una pregunta para principiantes. Simplemente no puedo encontrar la respuesta tan simple como puede ser.
Tengo dos archivos: uno con una función de JavaScript y el otro con el código HTML. El JavaScript debe construir los elementos de un menú.
Esto es lo que tengo:
JavaScript (mynaivesdk.js):
async function buildMenu(element){ const webElements = [{"name": "Home", "href": "index.html"}, {"name": "Works", "href": "works.html"}, {"name": "Contact", "href": "contact.html"}] var menu = document.getElementById(element); webElements.forEach((webelement) => { const row = '<li><a href="' + webelement.href + '">' + webelement.name + '</a></li>'; menu.innerHTML += row; }); }HTML:
<html> <head> <script type="module" src="mynaivesdk.js"></script> <title>My Menu</title> </head> <body> <h1>This is my menu</h1> <ul id="mymenu" onload="buildMenu('mymenu')"> </ul> </body> </html>El resultado es que no se muestra nada. No hay error. Estoy concluyendo que mi HTML no está invocando la función de JavaScript en absoluto.
Esto es lo que esperaría tener:
<html> <head> <script type="module" src="mynaivesdk.js"></script> <title>My Menu</title> </head> <body> <h1>This is my menu</h1> <ul id="mymenu"> <li><a href=ïndex.html">Home</a></li> <li><a href=works.html">Works</a></li> <li><a href=contact.html">Contact</a></li> </ul> </body> </html>Sé que esto debería ser extremadamente simple. Simplemente no puedo encontrar la forma correcta de hacer esto.
¡Gracias!
Llame a su función cuando se cargue el archivo JS y creará su menú para usted.
Deberá agregar el atributo defer a su etiqueta <script> . Este atributo simple reemplaza la necesidad de hacer DOMContentLoaded .
Aquí tienes:
function buildMenu(menu) { const webElements = [{ "name": "Home", "href": "index.html" }, { "name": "Works", "href": "works.html" }, { "name": "Contact", "href": "contact.html" }] webElements.forEach((webelement) => { const row = '<li><a href="' + webelement.href + '">' + webelement.name + '</a></li>'; menu.innerHTML += row; }); } buildMenu(document.getElementById('mymenu')); <html> <head> <script defer type="module" src="mynaivesdk.js"></script> <title>My Menu</title> </head> <body> <h1>This is my menu</h1> <ul id="mymenu"> </ul> </body> </html>Hay un par de cosas que debes saber:
Como señaló epascarello en un comentario, el elemento UL no tiene un evento de load , por lo que la función buildMenu() nunca se activará.
Por lo tanto, debe llamar a la función buildMenu, en función de algún evento (presionar un botón, pasar el mouse sobre un elemento específico o, en este caso, el evento de carga del documento).
El evento de carga de documentos ( DOMContentLoaded ) es importante porque se activa tan pronto como todos los elementos están presentes en el DOM. Antes de eso, si ejecutó la función buildMenu , es posible que el elemento #mymenu aún no esté allí y no sucederá nada.
Este método se expande fácilmente y puede agregar más llamadas a funciones, etc., a medida que desarrolla su aplicación. También vale la pena señalar que esta es la forma estándar de estructurar la carga/llamada de funciones de JavaScript.
Esto es lo que parece:
document.addEventListener('DOMContentLoaded', () => { const myUl = document.getElementById('mymenu'); buildMenu(myUl); }); function buildMenu(myEl){ const webElements = [{"name": "Home", "href": "index.html"}, {"name": "Works", "href": "works.html"}, {"name": "Contact", "href": "contact.html"}] //var menu = document.getElementById('mymenu'); //not needed webElements.forEach((webelement) => { const row = '<li><a href="' + webelement.href + '">' + webelement.name + '</a></li>'; myEl.innerHTML += row; }); } <html> <head> <script type="module" src="mynaivesdk.js"></script> <title>My Menu</title> </head> <body> <h1>This is my menu</h1> <ul id="mymenu" onload="buildMenu('mymenu')"> </ul> </body> </html>Element no tiene evento de onload .async .Por favor, lea acerca de JavaScript Asíncrono
</body> dentro de una etiqueta <script> o simplemente crear un nuevo archivo js . <body> ..... <!-- Here your change --> <script>buildMenu("mymenu");</script> </body> const row = `<li><a href="${element.href}">${element.name}</a></li>`; En su archivo script.js :
function buildMenu(menuID) { const webElements = [ { name: "Home", href: "index.html" }, { name: "Works", href: "works.html" }, { name: "Contact", href: "contact.html" } ]; var menu = document.getElementById(menuID); webElements.forEach((element) => { const row = `<li><a href="${element.href}">${element.name}</a></li>`; menu.innerHTML += row; }); } En su archivo index.html
<html> <head> <title>My Menu</title> </head> <body> <h1>This is my menu</h1> <ul id="mymenu"> </ul> <script src="script.js"></script> <script> buildMenu("mymenu") </script> </body> </html>