Javascript function not working properly on body onload

Question

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.

You can see immediately that you have unescaped qutoes by seeing the colour formatting of your submitted question. See how the string isn't all one colour? It should all look like look nice and brown :) — jonny, Oct 30 '15 at 11:54
please note that the `language` attribute has been deprecated for a long time. use `type="text/javascript"` - see https://developer.mozilla.org/en/docs/Web/HTML/Element/script — Jaromanda X, Oct 30 '15 at 11:59

score 4 · Accepted Answer · edited May 23 '17 at 10:27

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: ".

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)

Pranav C Balan · Answer 2 · 2015-10-30T11:54:44.413

2

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>

edited Oct 30 '15 at 11:54

answered Oct 30 '15 at 11:50

Pranav C Balan

113,687
23
165
188

Oh thankyou so much. Why is it wrong to use `"` instead of `'` ? – Ali Zia Oct 30 '15 at 11:51
IF you start with a `"` , when you put another `"` the code interpreter thinks that is the closer. So your code: `onload="toggle_color("` is wrong, because the only that is exectued is `toggle_color(` – Marcos Pérez Gude Oct 30 '15 at 11:53
`\\` is not an escape character in HTML. – Quentin Oct 30 '15 at 11:53
1

@AliZia - most browsers have Developer Tools with a console which, amongst other useful information, shows errors - I would recommend familiarising yourself with the the console if you wish to develop web pages – Jaromanda X Oct 30 '15 at 11:57

Javascript function not working properly on body onload

2 Answers2