Javascript 颜色迭代器不工作？

Question

首先，是的，我知道在 jQuery 中有一种更简单的方法来执行此操作，但我正在尝试学习如何在 Javascript 中手动执行此操作以更好地理解该语言。

我有一个 div，我想通过彩虹的多种颜色慢慢淡出。这是我到目前为止所拥有的:

<script type="text/javascript">
    var bar = document.getElementById("workbar");
    var x = 0;

    bar.onclick = change;

    function change() {
        requestAnimationFrame(color);
    }

    function color() {
        window.alert("color!");
        bar.style.background = "hsl(" + x + ", 100%, 50%);";
        if (x < 358) {
            x++;
            requestAnimationFrame(color);
        }

        else {
            x = 0;
            requestAnimationFrame(color);
        }
    }
</script>

我正在遍历 hsl 颜色系统的第一个数字，它将为我提供数百种颜色变化，但不是宇宙中每一个不必要的颜色阴影。

我点击它，没有任何反应。现在我知道它正在通过颜色功能，因为我把那个警告框放在那里然后它就消失了。我也知道它在颜色函数中循环，因为在你退出警告框后，另一个出现了。所以一定是它分配颜色的部分有问题。有什么想法吗？

Answer 1

去掉分号

"hsl(" + x + ", 100%, 50%);";
                          ^

---

(function () {

    var bar = document.getElementById("workbar"),
        x = 0;

    function color() {
        bar.style.background = "hsl(" + x + ", 100%, 50%)";
        x++; 
        if (x >= 358) {
            x = 0;
        }
        requestAnimationFrame(color);
    }

    function change() {
        requestAnimationFrame(color);
    }

    bar.addEventListener("click", change, false);

}());

<div id="workbar">Click Me</div>