0

Soy novato y no sé muchos términos.

Hola, mi problema es que pongo el enlace a un archivo .js en mi documento php, así:

<script type="text/javascript" src="js/arath.js"></script>

Y un botón con esto:

<input id="boton" type="button" onClick="visibilidadDiv('content');" value="Cerrar">

Pero al presionar el botón no ejecuta la función. Sé que otra forma de hacerlo es poner la función dentro de las etiquetas script.

Así que mi pregunta es, ¿sé puede hacer de esa forma? Si sí, ¿cuál es mi error? Si no, ¿por qué si pongo el código javascript en la página se puede ver en el navegador?

Código js:

function visibilidadDiv(id) {
    div = document.getElementById(id);
    if (div.style.display == "block") {
        div.style.display = "none";
    } 
}

Código html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8"/>
    <meta name=”distribution” content=”global”/>
    <link rel="STYLESHEET" type="text/css" href="css/principal.css"/>
    <link rel="STYLESHEET" type="text/css" href="css/cuadro.css"/>
    <script type="text/javascript" src="js/arath.js"></script>
</head>
<body>
    <header>
        <h1 id="titulo">  </h1>
        <figure id="linea">
            <img id="lins" src="img/v1.jpg" />
        </figure>
    </header>
    <nav>
        <ul>
            <li> <a href="index.php">Principal</a>  </li>
            <li> <a href="posts.php">Posts</a> </li>
            <li> <a href="libros.html">Libros</a> </li>
            <li> <a href="musica.html">M&uacutesica</a>  </li>
            <li> <a href="formulario.php">Publicar</a>  </li>
         </ul>
    </nav>
    <article id="principal">
        <article id="contenido">
                <h2 id="encabezado">Spring</h2>
                <figure id="linea">
                    <img id="lins" src="img/v5.png" />
                </figure>
                <div id="subdatos">
                    <h4 id="autor">Arath Ca&ntildeedo </h4><time id="fecha">2017-03</time>
                </div>
                <section>
                    <h4 id="articulo">
                        <figure id="fondo">
                            <a><img id="im" src="img/f5.jpg" class="hola" /> </a>
                        </figure>
                        Aquí va algo...
                    </h4>
                </section>
        </article>
        <aside>
            <h4 id="titulillo">Everything is fake</h4>
            <figure id="linea">
                <img id="linp" src="img/v5.png" />
            </figure>
            <iframe src="https://drive.google.com/file/d/1rojpcNF03YFW4S50qX6teqyTmofi7l0s/preview" ></iframe>
        </aside>
    </article>
</body>
<footer>
    <br><br><br><center><h5>Dise&ntildeo por POQEF-MaAr &copy</h5></center>
    <div id="content">
        <figure id="amor">
            <img id="amorr" src="img/f1.jpg" />
        </figure>
        Aquí va otra cosa...
        <input id="boton" type="button" onClick="visibilidadDiv('content');" value="Cerrar">
    </div>
</footer>

Muchas, gracias, por leer esta pregunta.

4
  • Puedes añadir el archivo .js en donde tienes el codigo de la función visibilidadDiv()?
    – Art_Code
    Commented el 23 feb. 2018 a las 23:56
  • Pueden ser varias causas, como que no se cargue correctamente el archivo .js (por error en ruta), algún error al teclear el nombre de la función o que no exista el elemento que quieres mostrar u ocultar. Sería conveniente que agregues en tu pregunta el código de la función y el html donde tienes el elemento. También, puedes revisar la consola de errores en el navegador y ver si ahí aparece un mensaje de error.
    – Triby
    Commented el 24 feb. 2018 a las 0:56
  • Ya agregué el código html y js a la pregunta. Pero según yo ambos sí están bien, porque se agrego la función dentro de las etiquetas "script" en el html funciona correctamente.
    – Bas Nuñez
    Commented el 24 feb. 2018 a las 20:16
  • Revisa en la consola del navegador si se está cargando el archivo js. Lo más probable es que le estés pasando una ruta incorrecta.
    – Xerif
    Commented el 24 feb. 2018 a las 21:21

1 respuesta 1

0

No parece que estés definiendo un estilo CSS display: block para el elemento content.

Entonces, cuando en la función se ejecuta esto...

if (div.style.display == "block") {
    div.style.display = "none";
}

... resulta que div.style.display es igual a vacío y entonces nunca se cumple la condición.

Podrías resolverlo definiendo el estilo CSS o cambiando el if para que compare con el valor none:

if (div.style.display != 'none')

Como nota aparte, es incorrecta la estructura del documento HTML: el elemento <footer></footer> no puede estar fuera de <body></body>.

2
  • Sí está ligado a un CSS definiendo la característica, me acabo de dar cuenta que no aparece nada arriba de BODY
    – Bas Nuñez
    Commented el 1 mar. 2018 a las 1:06
  • Ya edité el código de la preguna
    – Bas Nuñez
    Commented el 1 mar. 2018 a las 1:17

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.