Note that there are some explanatory texts on larger screens.

plurals
  1. POonClick event is not triggering function
    primarykey
    data
    text
    <p>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:</p> <pre><code>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; </code></pre> <p>Thank you for your help</p> <p>Edit (Working - Thanks Quentin):</p> <pre><code>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; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload