es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo hacer que el script se ejecute una vez que el primer script haya sido cargado.

30 May, 2023 Programación

Estoy intentando crear un framework web y una característica será una herramienta de gestión de estado de clave-valor. Necesito que la segunda etiqueta <script> se ejecute solo después de que se cargue ./script.js.
index.html:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
<script src="./framework.js"></script>
</head>
<body>
<p f-text="name"></p>
<script>
Framework.store('name', 'Joe');
</script>
</body>
</html>

framework.js:
“`js
document.querySelectorAll('*').forEach((element) => {
if (element.hasAttribute('f-text')) {
const textValue = element.getAttribute('f-text');

<pre><code>const key = window.fStore.find((x) => x.key === textValue);

element.innerHTML = key.value;
</code></pre>

}
});

window.Framework = {
store: (key, value?) => {
if (!value) {
const foundKey = window.fStore.find((x) => x.key === key);

<pre><code> return foundKey.value;
}

window.fStore = […window.fStore, { key: key, value: value }];
</code></pre>

}
}
<code>
Error:
</code>
SyntaxError: Símbolo inesperado ')'
en /framework.js:12:22
ReferenceError: Framework no está definido
en /:12:5
“`

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que la segunda etiqueta <script> se ejecute solo después de que se cargue ./script.js, necesitamos usar el atributo defer en el elemento <script>. Esto garantizará que el script se ejecute solo después de que el documento HTML se haya interpretado por completo.

    Aquí hay una versión actualizada del archivo index.html con el atributo defer:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./framework.js" defer></script>
  <script src="./script.js"></script>

<body>
  <p f-text="name"></p>
  <script>
    Framework.store('name', 'Joe');
  </script>
</body>

    Tenga en cuenta que también hemos intercambiado el orden de las etiquetas `

Comments are closed.