0
223
Vistas¿Hay alguna razón por la cual mi html se niega a llamar a la función javascript desde un archivo .js externo?
EDITAR: Gracias por las respuestas instructivas, sin embargo, nada ha tenido éxito. De lo contrario, todo funciona como se supone que debe hacerlo, pero por alguna razón <body onmousemove = coordinate(event)> no llama a las funciones de index.js (mi archivo javascript externo). Estoy usando codesandbox.io, ¿podría ser este el problema?
HTML llama con éxito al javascript para dibujar en el lienzo, pero cada vez que trato de referirme a una función, no la llama. >:(
Como sugiere el título, me he estado tirando de los pelos tratando de entender por qué la función de coordenadas (evento) se niega a ser llamada desde mi archivo src.
La idea es simple, a medida que el cursor se mueve por la pantalla, las coordenadas x e y del cursor deben registrarse en los cuadros de texto. Sin embargo, cuando ejecuto esto no pasa nada.
JavaScript:
let canvas = document.getElementById("gameScreen"); let ctx = canvas.getContext('2d'); //ctx = context ctx.clearRect(0,0,800,800) function coordinate(event) { var x = event.clientX; var y = event.clientY; document.getElementById("txt_iX").value = x; document.getElementById("txt_iY").value = y; } // Box width var bw = 800; // Box height var bh = 800; //Square size var sq = 20 // Padding var p = 0; for (var x = 0; x <= bh; x += sq) { for (var y = 0; y <= bw; y += sq) { ctx.fillStyle = 'black'; ctx.moveTo(p, 0.5 + x + p); ctx.fillRect(x,y,sq,sq) }} function drawBoard(){ for (var x1 = 0; x1 <= bw; x1 += sq) { ctx.moveTo(0.5 + x1 + p, p); ctx.lineTo(0.5 + x1 + p, bh + p); } for (var x2 = 0; x2 <= bh; x2 += sq) { ctx.moveTo(p, 0.5 + x2 + p); ctx.lineTo(bw + p, 0.5 + x2 + p); } ctx.strokeStyle = "green"; ctx.stroke(); } drawBoard();HTML:
<html> <head> <title>EXCEL_DM</title> <meta charset="UTF-8" /> <script type=”text/javascript” src = "src/index.js"> </script> </head> <body onmousemove = coordinate(event)> <canvas id = "gameScreen" width="800" height = "800" ></canvas> <br><br> <input id = "txt_ix" placeholder="txt_ix"> <br><br> <input id = "txt_iy" placeholder="txt_iy"> </body> </html>1 Respuestas
Responde la pregunta0
Para solucionar su problema, hay tres opciones. Todos ellos funcionarán, pero puedes elegir cuál te gusta más.
1. Moviendo la etiqueta del script en body
En este momento, está cargando el JavaScript antes del elemento canvas . Esto dificulta que JavaScript encuentre el elemento.
Para arreglar esto, simplemente mueva la etiqueta del script a la última línea (antes de la etiqueta </body> ).
A continuación se muestra un ejemplo:
<head> <!-- No more JavaScript here! --> </head> <body> <!-- Other HTML code here... --> <script src="src/index.js"></script> </body> 2. Agregar el atributo defer
Si no lo sabía, la etiqueta del script tiene un atributo llamado defer .
Según MDN Web Docs :
Este atributo booleano se establece para indicar a un navegador que el script debe ejecutarse después de que se haya analizado el documento, pero antes de
DOMContentLoaded.
Para agregar esto, simplemente deje su etiqueta de secuencia de script en el head , pero cámbielo para que se vea como se muestra a continuación.
<head> <!-- Still in the head! --> <script defer src="src/index.js"></script> </head> 3. Agregue una llamada addEventListener a JavaScript
Si no desea cambiar su HTML, puede agregar un detector de eventos en JavaScript, utilizando el evento DOMContentLoaded . Para obtener más información, visite MDN Web Docs .
Para implementar esta característica en su código JavaScript, simplemente agregue lo siguiente:
// You can also use the function keyword if you're targeting older browsers. document.addEventListener("DOMContentLoaded", (event) => { console.log("Hello, world! I'm loading after the DOM!"); }); Tenga en cuenta: DOMContentLoaded se activa una vez que se ha cargado el DOM, no después de que se hayan cargado imágenes, hojas de estilo, etc.
Si solo desea que su secuencia de comandos se ejecute después de que todo se haya cargado (imágenes, hojas de estilo, etc.), use el evento de load ( referencia de MDN ), como se muestra a continuación:
// You can also use the function keyword if you're targeting older browsers. window.addEventListner("load", (event) => { console.log("Hello, world! I'm loading after everything!"); });