onclick javascript function does not work in IE

Question

var myButton = document.getElementsByTagName("input");

myButton[0].onclick = function() {
  if(ansArray[0] == 'a')
    myButton[0].style.backgroundColor = "green";
  else
    myButton[0].style.backgroundColor = "red";
}

myButton[1].onclick = function() {
  if(ansArray[0] == 'b')
    myButton[1].style.backgroundColor = "green";
  else
    myButton[1].style.backgroundColor = "red";
}

onclick function not working in my above example(IE9), but they work fine in Chrome and Firefox.

Are there any other errors on the page which prevent this code from being executed properly? — Seth Battin
– Seth Battin, Commented Oct 23, 2012 at 5:19
@AlvinWong not strictly a bad idea either. Just be careful with lines that start with ( and a few other corner cases, and you're good to go. — Peter C
– Peter C, Commented Oct 23, 2012 at 5:24
@alpha123 my habit, is to add ; to the end of every assignments and function calls, even for inline functions, because they always make the code much clearer, prevents some errors and follow my habit writing most "C-style" languages — Alvin Wong
– Alvin Wong, Commented Oct 23, 2012 at 5:29
@AlvinWong I disagree with them making the code any cleaner, but I'm certainly not against semicolons; actually I use them in JS most of the time for the same reason you do: habit from other C-like languages. — Peter C
– Peter C, Commented Oct 23, 2012 at 5:31

Konstantin Dinev · Accepted Answer · 2012-10-23 07:33:34Z

1

The issue is that your DOM is not yet loaded when you are trying to access the buttons. Wrap your onclick handlers in window.load and everything should work fine:

window.onload = function () {
    var myButton = document.getElementsByTagName("input");

    myButton[0].onclick = function() {
        if(ansArray[0] == 'a') {
            myButton[0].style.backgroundColor = "green";
        } else {
            myButton[0].style.backgroundColor = "red";
        }
    }

    myButton[1].onclick = function() {
        if(ansArray[0] == 'b') {
            myButton[1].style.backgroundColor = "green";
        } else {
            myButton[1].style.backgroundColor = "red";
        }
    }
}

I am actually surprised this works under Webkit and Mozilla. I have created a small demo fiddle. In all cases, in all browsers the object comes out as null before load, unless the script block is after the element you are accessing inside the body.

Notice though that there is a difference in how getElementsByTagName reacts inside different browsers, it is different than getElementById: fiddle

Another alternative would be to not wait for window.onload would be to wait for document.body because window.onload happens after all content including images is loaded.

function Start() {
    if (document.body) {
        var myButton = document.getElementsByTagName("input");

        myButton[0].onclick = function() {
            if(ansArray[0] == 'a') {
                myButton[0].style.backgroundColor = "green";
            } else {
                myButton[0].style.backgroundColor = "red";
            }
        }

        myButton[1].onclick = function() {
            if(ansArray[0] == 'b') {
                myButton[1].style.backgroundColor = "green";
            } else {
                myButton[1].style.backgroundColor = "red";
            }
        }
    }
}

setInterval(Start, 50); // 50 ms is a small enough interval to retry

edited Oct 23, 2012 at 7:33

answered Oct 23, 2012 at 5:41

Konstantin Dinev

35k14 gold badges79 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nnnnnn Over a year ago

"The issue is that in IE your DOM is not yet loaded" - Why is that not also a problem in Chrome and FF?

Konstantin Dinev Over a year ago

@nnnnnn I have included a small demo

user1767304 Over a year ago

Your code works, I have seen it, but mine one fails to execute the event handler

Konstantin Dinev Over a year ago

@user1767304 Yeah the fiddle examples I have posted are to show you why that's happening.

Community · Accepted Answer · 2017-05-23 11:48:10Z

0

Same answer I used here Javascript onclick functions do not work should apply.

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Oct 23, 2012 at 5:36

Rhyono

2,4782 gold badges27 silver badges42 bronze badges

1 Comment

user1767304 Over a year ago

The buttons are created above the code segment given, the myButton array shows its langth, ansArray also shows contents. The given code is part of a number of alike functions for the entire myButton array.

Collectives™ on Stack Overflow

onclick javascript function does not work in IE

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related