Estoy tratando de usar un archivo js en mi archivo html pero me quedé atascado. El archivo html se vincula a mi archivo js, pero el js aún no funciona.
mi código (en el fragmento parece estar funcionando pero en mi archivo no lo hará):
document.body.innerHTML = "<h1>Today's date is </h1>" <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, width=device-width"> <!-- jquery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script> <!-- logo --> <link href="/static/logo2.ico" rel="icon"> <!-- css file --> <link href="/static/styles.css" rel="stylesheet"> <!-- hammer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script> <!-- touchswipe.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script> <!-- js file --> <script type = "text/javascript" src="../../static/js/reserve.js"></script> <title>Reservify</title> </head> <body> </body>Su javascript se ejecuta antes de que se cargue el documento DOM. Ejecute JavaScript después de cargar el documento DOM.
Como esto:
window.addEventListener('DOMContentLoaded', function(){ document.body.innerHTML = "<h1>Today's date is </h1>"; });O así:
window.onload = function() { document.body.innerHTML = "<h1>Today's date is </h1>"; }La mejor práctica es implementar sus scripts al final de la etiqueta del cuerpo.
El navegador cargará primero la página visible y es una mejor experiencia para el usuario.
<head> <title>Reservify</title> </head> <body> <!-- js file --> <script type = "text/javascript" src="../../static/js/reserve.js"></script> </body>Por qué las etiquetas de script deben colocarse al final de la etiqueta del cuerpo
Tienes que poner la llamada js en el cuerpo, esto porque el DOM carga primero este elemento cuando está cargando la página, esto hace que la carga de la página sea más rápida
<script type = "text/javascript" src="../../static/js/reserve.js"></script>Así que tienes que poner la línea de arriba al final del cuerpo, y tu código será así:
<meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, width=device-width"> <!-- jquery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> <!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script> <!-- logo --> <link href="/static/logo2.ico" rel="icon"> <!-- css file --> <link href="/static/styles.css" rel="stylesheet"> <!-- YOU HAVE TO DELETED THE JS CALLS HERE --> <title>Reservify</title> </head> <body> <!-- Here is your code --> <!-- In the end of the body you put your js calls --> <!-- hammer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script> <!-- touchswipe.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script> <!-- js file --> <script type = "text/javascript" src="../../static/js/reserve.js"></script> </body>Espero haberte ayudado (;