none
Referenciar javascript con html RRS feed

  • Pregunta

  • Hola quisiera que me ayuden con una actividad que tengo que hacer para la facultad. Estamos aprendiendo a usar javascript. Tengo un menu en el archvo html y en un archivo externo de javascript tengo que hacer que al pasar por las opciones del menu me cambie el fondo con el evento onMouseOver. Tambien tengo que mostrar con el evento document.write un mensaje o la fecha actual en una barra de notificaciones creada en el archivo html. No entiendo como hacer referencia a los elementos html desde javascript. Dejo el codigo de lo que tengo

    var  today = new Date();
    var m = today.getMonth() + 1;
    var mes = (m < 10) ? '0' + m : m;
    var clase = document.querySelector("#barra");

    clase=document.write('La fecha de hoy es: '+today.getDate(),'/' +mes,'/'+today.getFullYear());

    //esto es para la fecha y hora de la barra de notificaciones. Pero puede ser un mensaje que diga "hola bienvenidos"

    onmouseover="document.getElementById('agrupar').style.borderColor='white'";

    // y ese codigo es el que hice para cambiar el fondo de los link del menu. Tambien abajo dejo el html del menu

    <nav id="menu">
            <ul>
                <li><a href="Inicio.html">Home</a></li>
                <li><a href="SobreNosotros.html">Sobre Nosotros</a></li>
                <li><a href="NuestroTrabajos.html">Nuestros Trabajos</a></li>
                <li><a href="noticias.html">Noticias</a></li>
                <li><a href="Contacto.html">Contacto</a></li>
            </ul>
        </nav>

    lunes, 8 de julio de 2019 22:12

Todas las respuestas

  • Este es un ejemplo muy burdo pero hace lo que necesitas. Para esa funcionalidad es mejor utilizar css lo dejé aquí mismo pero comentado por si quieres evitar usar javascript y usar css.

    Saludos.

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*li:hover { background-color: cornflowerblue; }*/ </style> <title>Document</title> </head> <body> <nav id="menu"> <ul> <li onmouseover="poner(this)" onmouseout="quitar(this)"><a href="Inicio.html">Home</a></li> <li onmouseover="poner(this)" onmouseout="quitar(this)"><a href="SobreNosotros.html">Sobre Nosotros</a></li> <li onmouseover="poner(this)" onmouseout="quitar(this)"><a href="NuestroTrabajos.html">Nuestros Trabajos</a></li> <li onmouseover="poner(this)" onmouseout="quitar(this)"><a href="noticias.html">Noticias</a></li> <li onmouseover="poner(this)" onmouseout="quitar(this)"><a href="Contacto.html">Contacto</a></li> </ul> </nav>

    <p id="bienvenida"></p> <script>

    document.getElementById("bienvenida").innerHTML = 'hola bienvenidos' function poner(e){ e.style.backgroundColor = 'yellow'; } function quitar(e){ e.style.backgroundColor = 'white'; } </script> </body> </html>



    • Editado JesusNaranjo viernes, 20 de septiembre de 2019 2:02 Olvidé una solicitud
    • Propuesto como respuesta JesusNaranjo viernes, 20 de septiembre de 2019 18:58
    • Votado como útil JesusNaranjo viernes, 20 de septiembre de 2019 18:58
    viernes, 20 de septiembre de 2019 1:55