JavaScript button.onclick doesn't work

Question

I recently started learning how to use JavaScript in my webpage. My exercise today is to make a button that can give me a V shape.

The code to create the V shape is fine, but it doesn't work when I try to put it in a click handler (i.e. oBtn.click = function (){};).

In the HTML document I have the following code:

<style>
    div{
        width: 50px;
        height: 50px;
        border: 1px red solid;
        position: absolute;
        line-height: 50px;
        text-align: center;
        margin: 5px;
    }
</style>
<script type="text/javascript">
    window.onload = function (){
        var oBody = document.getElementById('body');
        var aDiv = document.getElementsByTagName('div');
        var oBtn1 = document.getElementById('btn1');

        for (var i = 0; i < 9; i++) {
            oBody.innerHTML += '<div>'+ i +'</div>';
        }
        for (var i = 0; i < aDiv.length; i++) {
            aDiv[i].style.left =i*50+'px';
        }

        oBtn1.onclick = function (){
        for (var i = 0; i < aDiv.length/2; i++) {
            aDiv[i].style.top = 40+i*50+'px';
        }
        var x = aDiv.length;
        for (var i = 4; i < x; i++) {
            aDiv[i].style.top =x*50-i*50-50+40+'px';    
        }
        };
    };
</script>

Try using [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) instead of setting the onclick handler directly. `oBtn1.addEventListener("click", function() { ... } );` — Tibrogargan, Aug 31 '16 at 21:20
Possible duplicate of [Is it possible to append to innerHTML without destroying descendants' event listeners?](http://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-event-list) — Sᴀᴍ Onᴇᴌᴀ, May 04 '17 at 22:36

Tibrogargan · Answer 1 · 2016-08-31T21:53:35.897

I believe this is close to what you wanted. Runs in chrome, but may not in other browsers (notably IE). Doesn't work as a snippet, sorry. I suspect trying to modify all divs in the body is going to cause you trouble in the long term. A couple of things to notice:

You don't need to get the body by name, you can just use document.body (I'm making an assumption here - however giving an element the id "body" could easily cause confusion)
Your divs must be created before you try to get the array from the DOM
Event handlers are done using the commonly preferred method.

<html>
<head>
<style>
    div{
        width: 50px;
        height: 50px;
        border: 1px red solid;
        position: absolute;
        line-height: 50px;
        text-align: center;
        margin: 5px;
    }
</style><script>
window.addEventListener("DOMContentLoaded", function () {
    for (var i = 0; i < 9; i++) {
        document.body.innerHTML += '<div>'+ i +'</div>';
    }

    var aDiv = document.getElementsByTagName('div');
    for (var i = 0; i < aDiv.length; i++) {
        aDiv[i].style.left =i*50+'px';
    }

    document.getElementById('btn1').addEventListener("click", function () {
        for (var i = 0; i < aDiv.length/2; i++) {
            aDiv[i].style.top = 40+i*50+'px';
        }
        var x = aDiv.length;
        for (var i = 4; i < x; i++) {
            aDiv[i].style.top =x*50-i*50-50+40+'px';
        }
    });
}, false);
</script>
</head>
<body>
  <input type="button" id="btn1"><br />
</body>
</html>

score -2 · Answer 2 · answered Aug 31 '16 at 21:26

If I understand this right, you want to execute 'oBtn1.onclick' as a click event? If so, do something like this

function buttonClick (){
for (var i = 0; i < aDiv.length/2; i++) {
            aDiv[i].style.top = 40+i*50+'px';
}

oBtn1.addEventListener('click', buttonClick);

what that will do is as soon as the element that contains the id 'oBtn1' is clicked it will execute your for loop.

score -2 · Answer 3 · answered Aug 31 '16 at 21:27

What does your html look like? If it looks kind of like the below snippet then it should be working, though you should look at using addEventListener for this kind of thing.

    window.onload = function (){
        var oBody = document.getElementById('body');
        var aDiv = document.getElementsByTagName('div');
        var oBtn1 = document.getElementById('btn1');

        for (var i = 0; i < 9; i++) {
            oBody.innerHTML += '<div>'+ i +'</div>';
        }
        for (var i = 0; i < aDiv.length; i++) {
            aDiv[i].style.left =i*50+'px';
        }

        oBtn1.onclick = function (){
            for (var i = 0; i < aDiv.length/2; i++) {
                aDiv[i].style.top = 40+i*50+'px';
            }
            var x = aDiv.length;
            for (var i = 4; i < x; i++) {
                aDiv[i].style.top =x*50-i*50-50+40+'px';    
            }
        };
    };

div{
        width: 50px;
        height: 50px;
        border: 1px red solid;
        position: absolute;
        line-height: 50px;
        text-align: center;
        margin: 5px;
    }

<button id="btn1">press</button>
<div id="body"></div>

JavaScript button.onclick doesn't work

3 Answers3