Event onclick does not respond

Navigation
4

I'm trying to execute this code: 

    <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>

The problem is that it does not load the onclick event in any of the ways. I have also tried to create the function before and call it when the event happens, but it does not work. The only way that works for me is to enter the code inline, and I do not want to do it that way. The idea is to make the entire code

asked by Jogofus 24.04.2017 в 17:03
source

4 answers

3

It may be that the document has not yet finished pairing and loading.

As a recommendation, some important points:

Be aware of the process of parsing and loading HTML

Every document passes through a parsing stage and is finally loaded and becomes available. The DOM (Object Document Model) is an interface that allows you to interact with the document. This interface is responsible for interacting with HTML by storing each label in a Node within a tree, which is nothing more than the representation of the label in an interface.

What does this have to do with your question? That when you interact with the document when it has not yet been fully uploaded, it is very likely that you get a null reference because it has not yet been parsed and is not available in the DOM tree .

A good practice is to select the items when the document has been loaded . In

This way you make sure that the nodes are available in the DOM tree.

Do not put scripts in the header

Unless you mark these scripts with the attribute async or defer , do not put them in the header because the parsing of the document will not continue until the scripts have been resolved. Instead put the scripts before closing the body: 

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

Keep these points in mind when interacting with the elements.

    
answered by 24.04.2017 / 17:42
source
2

According to the flow html : first the <script> is executed and then the <body> , I recommend placing the <script> after <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>
    
answered by 24.04.2017 в 19:33
1

Try doing the function ocultar() and assigning the onclick as an attribute of the button. 

<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>

If not, try 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>
    
answered by 24.04.2017 в 17:16
-1

The problem with which you are finding is that the button is not yet loaded in the DOM when the javascript is executed. In the jsFiddle that was provided in the comment this does not happen, since jsFiddle is already responsible for loading the javascript in the corresponding event.

There are many ways to get the code executed when the DOM has finished loading.

Put the code at the end of the body.

We reverse the order and put the script tag at the end of the body tag: 

<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>

We use the event 'DOMContentLoaded' of object 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>

We use the 'load' event of object 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

let's see the 'onreadystatechange' event of object 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>

We use the 'onload' event of object 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>

Why are there so many events and so many possibilities? Is not that something more confusing?

The main reason is due to a compatibility issue. For example DOMContentLoaded is the event that is most widespread, but nevertheless it does not work in IE8 and earlier.

    
answered by 24.04.2017 в 17:19
Difference of putting two classes in css together or separately in a statement RegExp option to not enter special characters