Javascript颜色迭代器不工作？

首先，是的，我知道在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颜色系统的第一个数字，它将为我提供数百种颜色变化，但不是宇宙中所有不必要的颜色阴影

我点击它，什么也没发生。现在我知道它正在进入颜色功能，因为我把那个警报框放在那里，它就响了。我也知道它是通过颜色函数循环的，因为在你从警告框中取出x之后，会出现另一个。因此，指定颜色的零件肯定有问题。有什么想法吗？

去掉分号

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

作用{ var bar=document.getElementByIdworkbar， x=0； 功能色{ bar.style.background=hsl+x+，100%，50%； x++； 如果x>=358{ x=0； } requestAnimationFramecolor； } 功能改变{ requestAnimationFramecolor； } bar.addEventListenerclick、change、false； };

---

单击“弯板捕捉”。通常是一些小事把我搞砸了。