4

Estoy tratando de ejecutar este código:

    <style type="text/css">
        #boton{
            width: 50px;
            height: 30px;
            display: block;
            margin:30px;
        }

        img{
            width: 300px;
            height: 200px;
            margin:30px;
        }
    </style>

    <script type="text/javascript">
        var boton = document.getElementById('boton');
        boton.onclick = function(){
            var imagen = document.getElementById('foto');
            imagen.style.display ='none';
        }
    </script>
</head>
<body>
    <button id="boton">Click</button>
    <img src="header.jpg" id="foto">
</body>

El problema es que no carga el evento onclick de ninguna de las formas. También he intentado crear la función antes y llamarla cuando se suceda el evento, pero no funciona. De la única forma que me funciona es introduciendo el código de forma inline, y no quiero hacerlo así. La idea es hacer todo el código en un archivo aparte.

6
  • 4
    Jogofus, acabo de convertir tu codigo tal cual en un ejecutable con los snippets y funciona bien. jsfiddle.net/lois6b/w8m8e97x
    – lois6b
    el 24 abr. 2017 a las 15:09
  • Te recomiendo, que limpies tus scripts de la página en Chrome (cntrl + F5) o prueba tu código utilizando depuradores de internet. el 24 abr. 2017 a las 15:12
  • He probado con 3 navegadores: Chrome, Opera y Edge y en ninguno me ha funcionado. @lois6b acabo de probarlo en la pagina que me has mandado y veo que funciona perfectamente. ¿Por que a mi no me funciona en los navegadores abriendo el fichero .html?
    – Jogofus
    el 24 abr. 2017 a las 15:14
  • @lois6b fyi window.onload = function(){...} :)
    – Davlio
    el 24 abr. 2017 a las 15:41
  • 1
    Es simple, no funciona porque primero se ejecuta el script y para ese momento el tag <button id="boton"> NO EXISTE, te he colocado una respuesta con un ejemplo que si funciona, por otro lado lo que hace no es una buena practica, lo correcto es que el código javascript lo coloques al final de la pagina y de ser posible en un archivo aparte, Saludos!! ;))...
    – fwBasic
    el 24 abr. 2017 a las 17:39

4 respuestas 4

3

Es posible que pueda deberse a que el documento aún no se ha terminado de parsear y cargar.

Como recomendación, algunos puntos importantes:

Sé consciente del proceso de parseo y carga del HTML

Todo documento pasa por una etapa de parseo y finalmente se carga y pasa a estar disponible. El DOM (Object Document Model) es una interface que te permite interactuar con el documento. Esta interface es la encargada de interactuar con el HTML almacenando cada etiqueta en un Nodo dentro de un árbol, el cual no es más que la representación de la etiqueta en una interface.

¿Qué tiene que ver esto con tu pregunta? Que cuando interaccionas con el documento cuando aún no ha sido completamente cargado, es muy probable que obtengas una referencia nula porque aún no ha sido parseado y no está disponible en el árbol DOM.

Una buena práctica es seleccionar los elemetos cuando el documento ha sido cargado. En puro se hace capturando el evento DOMContentLoaded:

 document.addEventListener('DOMContentLoaded', function() {
    // selecciona los elementos aquí
});

En se hace mediante el evento personalizado ready:

$(document).on('ready', function() {
    // selecciona los elementos aquí
});

Así te aseguras que los nodos estén disponibles en el árbol DOM.

No pongas scripts en la cabecera

A no ser que marques estos scripts con el atributo async o defer, no los pongas en la cabecera porque el parseo del documento no proseguirá hasta que los scripts hayan sido resueltos. En su lugar pon los scripts antes del cierre del body:

<script>
    // código abcdeghi
</script>
</body>

Ten en cuenta estos puntos al interactuar con los elementos.

1
  • Comento un pequeño error, dice uba en vez de una.
    – user13558
    el 19 dic. 2018 a las 6:04
1

Prueba haciendo la funcion ocultar() y asignando el onclick como atributo del boton.

<script type="text/javascript">

     function ocultar(){
        var imagen = document.getElementById('foto');
        imagen.style.display ='none';
    }
</script>
</head>
<body>
    <button id="boton" onclick="ocultar();">Click</button>
    <img src="header.jpg" id="foto">
</body>

Si no, prueba con JQuery:

$(document).ready(function() {
      $('#boton').on('click', function() {

        var imagen = document.getElementById('foto');
        imagen.style.display = 'none';

      });

    });
#boton {
  width: 50px;
  height: 30px;
  display: block;
  margin: 30px;
}

img {
  width: 300px;
  height: 200px;
  margin: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button id="boton">Click</button>
  <img src="http://icdn.pro/images/es/j/p/jpg-imagen-icono-8802-128.png" id="foto">
</body>

2
  • La idea es evitar hacer uso del inline, y hacer uso de los eventos directamente desde el documento .js externo.
    – Jogofus
    el 24 abr. 2017 a las 15:26
  • @jogofus inline, a que te refieres? si quieres que todo el js esté en un archivo externo usa jquery como te indico o con un evento window.onload
    – lois6b
    el 24 abr. 2017 a las 15:28
1

Segun el flujo html: primero se ejecuta el <script> y luego el <body>, te recomiendo colocar el <script> despues del <body>:

<body>
    <button id="boton">Click</button>
    <img src="header.jpg" id="foto">
</body>
<script type="text/javascript">
 var boton = document.getElementById('boton');
 boton.onclick = function(){
  var imagen = document.getElementById('foto');
  imagen.style.display ='none';
 }
</script>

-1

En problema con el que te estás encontrando es que el botón aún no está cargado en el DOM cuando el javascript se ejecuta. En el jsFiddle que proporcionaron en el comentario esto no ocurre, ya que jsFiddle ya se encarga de cargar el javascript en el evento correspondiente.

Hay muchas formas de conseguir que el código se ejecute cuando el DOM haya terminado de cargar.

Poner el código al final del body.

Invertimos el orden y ponemos la etiqueta script al final de la etiqueta body:

<html>
  <head>
    <style type="text/css">
        #boton{
            width: 50px;
            height: 30px;
            display: block;
            margin:30px;
        }

        img{
            width: 300px;
            height: 200px;
            margin:30px;
        }
    </style>
</head>
<body>
    <button id="boton">Click</button>
    <img src="header.jpg" id="foto">
    <script type="text/javascript">
        var boton = document.getElementById('boton');
        boton.onclick = function(){
            var imagen = document.getElementById('foto');
            imagen.style.display ='none';
        }
    </script>
</body>
</html>

Usamos el evento 'DOMContentLoaded' del objeto document:

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
            var boton = document.getElementById('boton');
            boton.onclick = function(){
                var imagen = document.getElementById('foto');
                imagen.style.display ='none';
            }
}, false);
        </script>

Usamos el evento 'load' del objeto window:

<script type="text/javascript">
window.addEventListener('load', function() {
            var boton = document.getElementById('boton');
            boton.onclick = function(){
                var imagen = document.getElementById('foto');
                imagen.style.display ='none';
            }
}, false);
        </script>

U

samos el evento 'onreadystatechange' del objeto document:

<script type="text/javascript">
document.attachEvent('load', function() {
            var boton = document.getElementById('boton');
            boton.onclick = function(){
                var imagen = document.getElementById('foto');
                imagen.style.display ='none';
            }
});
        </script>

Usamos el evento 'onload' del objeto window:

<script type="text/javascript">
window.attachEvent('onload', function() {
            var boton = document.getElementById('boton');
            boton.onclick = function(){
                var imagen = document.getElementById('foto');
                imagen.style.display ='none';
            }
});
        </script>

¿Por que hay tantos eventos y tantas posibilidades? ¿No resulta eso algo más confuso?

El motivo principal se debe a una cuestión de compatibilidad. Por ejemplo DOMContentLoaded es el evento que está más extendido, pero sin embargo no funciona en IE8 y anteriores.

8
  • @downvoters Es posible que me equivoque y no sea ese el problema pero a que son debidos los downvotes? Agradecería un comentario para comprender el problema con la respuesta.
    – frikinside
    el 24 abr. 2017 a las 15:30
  • Los scripts se ejecutan cuando el Dom ah terminado de cargar (documentación), si bien lo que publicas es una buena práctica, esto no es una solución. el 24 abr. 2017 a las 15:30
  • Al tratarse de una funcion que se llama al realizarse en un evento como es el del click en un determinado elemento, no deberia ejecutarse sin tener que cargarse cuando termine la pagina? Hace un par de años lo ejecutaba asi, sin cargarlo con window.onload y corria perfectamente.
    – Jogofus
    el 24 abr. 2017 a las 15:30
  • Y así sería si no estuviera esta línea en el Javascript var boton = document.getElementById('boton'); Si esa línea de javascript se ejecuta antes de que el elemento con ID='boton' se renderize, no se va a poder asociar el evento. Al menos ese es el problema que me pareció entender que te estaba ocurriendo.
    – frikinside
    el 24 abr. 2017 a las 15:32
  • 1
    @GabrielJeremyRodriguezRiver, ¿Podrías mostrarnos la documentación donde se dice exactamente que los script declarados en la TAG Head (que no Header) se ejecutan cuando se ha cargado el DOM? De ser así, la anotación $( document ).ready() de jQuery, por ejemplo, sería casi innecesaria.
    – user17875
    el 24 abr. 2017 a las 16:00

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.