Question

我有一个JavaScript函数

<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>

我在我的身上onload调用它

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

但没有任何事情发生。身体的背景是一样的。任何错误可能的想法？我所知道的是剧本是真实的并且100％正常工作。

Answer 1

onload="toggle_color("
       ^             ^

查看属性值的开头？查看属性值的结尾？

要将"用作由"个字符分隔的HTML属性值中的数据，您需要将其表示为字符引用："。

或者，使用'字符来分隔JS字符串或分隔属性值。

更好的是，完全避免内在事件属性。除了仅仅处理报价之外，他们还有all kinds of gotchas。

使用JavaScript绑定事件处理程序。

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

addEventListener("load", setDefaultColour)

Answer 2

您需要使用'而不是"，因为"指定html标记中属性值的结尾

<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>

Javascript函数在body onload上无法正常工作

2 个答案: