3

Tengo un menú con un botón de "Salir", pero quiero que en lugar de que me desconecte de la página desde el código de HTML se ejecute una función en JavaScript, por el momento tengo en esa función con console.log("Función para salir."); para probar. ¿Cómo puedo llamar a la función salirV del archivo jsPCU.js desde el archivo PCU.html?

Código del PCU.html:

<li>
    <a href= "#">
        <i class="ion-log-out"></i>
        <span  onclik = "salirV();">Salir</span>
    </a>
</li>

Código del jsPCU.js:

function salirV(){
    console.log("Función para salir.");
}

Mi intención es llamar a esa función ya sea desde el <a href= "#"> o desde el <span onclik = "salirV();">, espero puedan ayudarme.

3 respuestas 3

3

Puedes asignar la ejecución de la función directamente al anchor en la etiqueta <a onclick="miFuncion()">

Al hacer esto, no necesitas asignarlo de nuevo al <span>.

function salirV(){
    console.log("Función para salir1.");
}
<li>
    <a href= "#" onclick="salirV()">
        <i class="ion-log-out"></i>
        <span>Salir</span>
    </a>
</li>

2
  • 1
    Muchas gracias por tu respuesta, me ha servido. Commented el 29 ago. 2019 a las 22:08
  • Enhorabuena Carlos, un placer ser de ayuda. ;)
    – jachguate
    Commented el 29 ago. 2019 a las 22:14
3

La manera ideal sería algo como esto:

document.getElementById("link").addEventListener("click", () => {
  console.log("Hacemos algo cuando se hace click");
})
<li>
  <a id="link" href="#">
    <i class="ion-log-out"></i>
    <span>Salir</span>
  </a>
</li>

Poner los listeners en el HTML no es una muy buena práctica, hay dos razones fundamentales en mi opinión:

  • Es contrario a la buena práctica de separar comportamiento de contenido (ver JavaScript no obstrusivo) y la otra,
  • es que es una cuestión de performance y seguridad, como le tenemos que pasar un string como argumento, el compilador tiene que evaluar el código cada vez que se hace click, eso genera un posible riesgo de XSS.

Pero suponiendo que dejamos eso de lado, las especificaciones de la web tienden a cumplir y eventualmente obligar a cumplir esos paradigmas, por lo que puede haber futuras restricciones a esa práctica.

1
  • Ahora mismo me pongo a leer la documentación que adjuntaste para revisar mi código, muchas gracias por tu respuesta. Commented el 30 ago. 2019 a las 18:26
1

Utiliza<a onclick="myFunction()" href= "#"> donde myFunction es la Funcion a ejecutar cuando el usuario de clic en la etiqueta a (enlace).

1
  • Muchas gracias por tu respuesta, optaré por colocar como "Respuesta" la de jachguate, pues está más explicada y podría ayudar en un futuro a personas que tengan el mismo problema, un saludo. Commented el 29 ago. 2019 a las 22:08

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.