onClick event is not triggering function

Question

I have the following script which attempts to change the color of a div, when clicked, with an id of wrapper. I have tried variations of what's below, but can't see the issue. The on click event does not trigger the function.

I have tried changing background-color to backgroundColor, which didn't make a difference. I know I'm using a global variable here, please ignore that part:

var wrapper;

function wrapperColorToCoral () {
    wrapper.setAttribute('style', 'background-color:LightCoral;');
}

function wrapperColorToGreen () {
    wrapper.setAttribute('style', 'background-color:LightGreen;');
}

function colorChange () {
    //if (wrapper.getAttribute('style', 'background-color:LightCoral;') === true) {
    if (wrapper.style != 'background-color:LightGreen;') {
    wrapperColorToGreen();
    }
    else {
    wrapperColorToCoral();
    }
}
// INIT FUNCTION
function init () {
    wrapper = document.getElementById('wrapper');
    wrapper.onClick = colorChange();
}

window.onload = init;

Edit (Working - Thanks Quentin):

var wrapper

function wrapperColorToCoral () {
    wrapper.style.backgroundColor="LightCoral";
}

function wrapperColorToGreen () {
    wrapper.style.backgroundColor="LightGreen";
}

function colorChange () {
    if (wrapper.style.backgroundColor==="LightCoral") {
    wrapperColorToGreen();
    }
    else {
    wrapperColorToCoral();
    }
}

function init () {
wrapper = document.getElementById('wrapper');
wrapper.addEventListener("click", colorChange, false);
}
window.onload = init;

Change your init to: wrapper.onclick = colorChange;

RobH
– RobH

2013-07-25 14:02:45 +00:00
Commented Jul 25, 2013 at 14:02 — RobH
– RobH, Commented Jul 25, 2013 at 14:02

Quentin · Accepted Answer · 2013-07-25 14:02:49Z

6

JavaScript is case-sensitive. The property is onclick (but you should probably be using addEventListener anyway).
Putting () on the end of a function name will call the function. You want to assign it to a property. Remove the parenthesis.

answered Jul 25, 2013 at 14:02

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

6 Comments

majordomo Over a year ago

thanks so much! - so you recommend I do something more like: wrapper.addEventListener("click", colorChange, false);?

majordomo Over a year ago

@Quentin - could you tell me why it only listens once, but if I click a second time, it doesn't run the function again?

Quentin Over a year ago

It does run the function again. wrapper.style doesn't give you the value you think it does.

majordomo Over a year ago

@Quentin - still not getting it to work, I've made some edits above - when I do, wrapper.style.backgroundColor="LightCoral"; in the console it works, but the function still doesn't seem to run again...

Quentin Over a year ago

= is an assignment, not a comparison, it will always be true.

|

Collectives™ on Stack Overflow

onClick event is not triggering function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related