1

funciones del main.js al index.html

Si tengo un main.js con varias funciones, ¿puedo llamar a una sola de ellas dentro de mi documento HTML? ¿Cómo lo logro?

Sé que tengo que insertar el documento JavaScript usando el elemento script, con el atributo src, pero así estoy insertando el documento completo con todas las funciones juntas. Dejo una imagen para darme a entender mejor.

Recién empiezo, no sé qué términos utilizar para encontrar esta información en internet.

¡Cualquier guía es bien recibida, gracias!

3
  • Hola y bienvenida. Haz el recorrido para conocer cómo funciona la comunidad. Tu pregunta podría ser cerrada tal y como está.
    – DjCrazy
    el 18 ene. 2022 a las 2:49
  • No has definido ninguna función en ese fichero main.js, hay dos sentencias que se ejecutan directamente. el 18 ene. 2022 a las 10:36
  • Saludos, Andrea, y bienvenida a StackOverflow en Español. ¿Alguna de las respuestas mencionadas abajo te sirvió? En ese caso, por favor, marca la solución que te sirvió como aceptada (ese "visto" que hay debajo de las flechas).
    – Tupi
    el 19 ene. 2022 a las 7:08

2 respuestas 2

0

Cuando tú importas un documento JS en tu HTML (<script scr="main.js"></script>), estás importando el documento entero. Esto implica que se ejecutará automáticamente todo lo que haya en él. Por este motivo, tu código se ejecuta completo dos veces.

En tu documento HTML, tienes dos líneas de código, no dos funciones. Y en parte ahí está la cuestión. Explicándolo de forma sencilla, una función es un trozo de código que puedes reutilizar. Por ejemplo, podrías hacer algo así en tu main.js:

function primerWrite() {
  document.write("Hello world");
}

function segundoWrite() {
  document.write("<h1>Hello world</h1>");
}

Como ves, hemos declarado dos funciones, una llamada primerWrite() y otra llamada segundoWrite().

Con esto, el código declara dos funciones. Esto implica que, ahora, el navegador significa que primerWrite()significa document.write("Hello World!").

Es decir, hasta ahora, tenemos un script (main.js) que tiene dos funciones. Con esto claro, podrías hacer varias cosas:

  • Podrías incluir un <script></script> en el HTML, en el lugar que quieras que se ejecute la función. Por ejemplo, y replicando un poco tu código:

<p>Tema 1...</p>
<script>primerWrite();</script>
<p>También puede usarse marcado...</p>
<script>segundoWrite();</script>

Con esto, cuando llegara al primerWrite(), solo escribiría lo que hay dentro de esa función, y lo mismo con segundoWrite(). También podrías poner, dentro de la etiqueta , simplemente el código a ejecutarse, algo así como lo siguiente:

<p>Tema 1...</p>
<script>document.write("Hello world");</script>
<p>También puede usarse marcado...</p>
<script>document.write("<h1>hello world</h1>");</script>

Es importante, eso sí, que antes que nada importes el archivo main.js, para que el navegador sepa qué significa cada función (puedes importarlo usando <script scr="main.js"></script>) en el head.

  • También podrías hacer como comenta Pablo en su respuesta, hacer que se ejecute al pulsar un botón, pero eso ya es otro tema (su respuesta incluye más detalles al respecto).

Cualquier duda, puedes ponerla en los comentarios.

2
  • Ya veo, entonces solo puedo traer funciones que yo declare. Todo tiene más sentido. Lo acabo de probar y funciona perfecto! De verdad te agradezco, ahora puedo seguir practicando
    – Andrea
    el 19 ene. 2022 a las 12:07
  • ¡Genial! Me alegro de escuchar esto. Si la respuesta te ha servido, puedes aceptarla pulsando el botón de "aceptar la respuesta", que se encuentra bajo las flechitas. Así, otros usuarios podrán beneficiarse si tienen la misma duda que tuviste.
    – Tupi
    el 19 ene. 2022 a las 12:28
0

podrías llamar a una función del main.js cuando alguien aprete un boton por ejemplo:

let btn = document.querySelector('#boton')

btn.addEventListener('click', () => {

console.log('Hello world!')

})

Muchos elementos de html aceptan eventos, así podrías buscarlo "eventos en javascript".

https://lenguajehtml.com/html/scripting/eventos-html/

1
  • Como recién comienzo no conocía los eventos, tu ejemplo me sirve muchísimo para investigar más. Te agradezco mucho
    – Andrea
    el 19 ene. 2022 a las 11:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.