CODEWITHSUNDEEP
javascriptjqueryhtml
Ali Zia
Ali Zia

Reputation: 3875

Javascript function not working properly on body onload

I have a JavaScript function

<script language="javascript">
function toggle_color(color1, color2, cycle_time, wait_time) { 
   setInterval(function first_color() {
       document.body.style.backgroundColor = color1;
       setTimeout(change_color, wait_time);
   }, cycle_time);

    function change_color() {
     document.body.style.backgroundColor = color2;
    }
}
</script>

I am calling it on my body onload

<body onload="toggle_color("#61beb3", "#90a2c6", 4000, 2000);">
Lorem Ipsum Dolar.
</body>

But nothing is happening. The body's background is while. Any ideas where the error might be? All I know is that the script is authentic and 100% working.

Upvotes: 0

Views: 187

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

You need to use ' instead of " , since " specifies the end of attribute value in html tag 

<script language="javascript">
function toggle_color(color1, color2, cycle_time, wait_time) { 
   setInterval(function first_color() {
       document.body.style.backgroundColor = color1;
       setTimeout(change_color, wait_time);
   }, cycle_time);

    function change_color() {
     document.body.style.backgroundColor = color2;
    }
}
</script>
<body onload="toggle_color('#61beb3', '#90a2c6', 4000, 2000);">
Lorem Ipsum Dolar.
</body>

Upvotes: 2

Quentin
Quentin

Reputation: 943510

onload="toggle_color("
       ^             ^

See the start of your attribute value? See the end of your attribute value?

To use " as data in an HTML attribute value delimited by " characters you need to represent it as a character reference: &quot;.

Alternatively, use ' characters either to delimit your JS strings or to delimit your attribute value.

Better yet, avoid intrinsic event attributes entirely. They have all kinds of gotchas aside from just making dealing with quotes a pain.

Bind your event handlers with JavaScript instead.

function setDefaultColour() {
    toggle_color("#61beb3", "#90a2c6", 4000, 2000);
}

addEventListener("load", setDefaultColour)

Upvotes: 4

Related Questions