Estoy haciendo algunas prácticas/pruebas básicas para un proyecto en el que estoy trabajando y no puedo obtener mi archivo html para acceder a las funciones escritas en el archivo javascript adjunto. Siento que hay algo súper básico que me estoy perdiendo, pero no puedo identificarlo.
Saqué el botón básico de aquí: Creación de un botón de ENCENDIDO/APAGADO con javascript Y probé las soluciones aquí: el archivo HTML no extrae información del archivo javascript
Mi html:
<!DOCTYPE html> <head> <script type="text/javascript" src="app.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <input type="button" value="X" id="turn" onclick="turn();"> </body> </html>Mi js:
function turn(){ currentvalue = document.getElementById('turn').value; if(currentvalue == "X"){ document.getElementById("turn").value="O"; } else{ document.getElementById("turn").value="X"; } } La función en sí funciona cuando está incrustada en una etiqueta de script dentro de <body> pero no cuando se extrae del archivo javascript adjunto. ¿Qué me estoy perdiendo?
Debe usar la etiqueta <script> en el cuerpo.
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <input type="button" value="X" id="turn" onclick="turn();" /> <script src="app.js"></script> </body> </html>Para resumir: enfoque moderno al enfoque antiguo
module que están defer de forma predeterminada <script type="module" src="/app.js"></script>defer para asegurarse de que su js se ejecute después de que la página se haya cargado, es decir, <script src=app.js" defer></script><script> antes del cierre de la etiqueta del cuerpo </body>Para más detalles, puedes mirar esta excelente respuesta .
function turn(){ currentvalue = document.getElementById('turn').value; if(currentvalue == "X"){ document.getElementById("turn").value="O"; } else{ document.getElementById("turn").value="X"; } } <!DOCTYPE html> <head> <script type="text/javascript" src="app.js" defer></script> <link rel="stylesheet" href="style.css"> </head> <body> <input type="button" value="X" id="turn" onclick="turn();"> </body> </html>Debe agregar el atributo diferido.