为什么我的Javascript SWITCH语句不能用于HEX颜色分配



JSFiddle在这里:https://jsfiddle.net/2Xgfr/829/

下面的Raise函数按预期工作(在颜色之间循环)。Lower函数没有,唯一的区别是从文本到十六进制的颜色分配。

HTML元素

<button type="button" id="subEmail" onclick="Raise();">Raise</button>
<button type="button" id="subEmail2" onclick="Lower();">Lower</button>

JS片

<script>
  function Raise() {
    var inputVal = document.getElementById("subEmail");
    var currentcolor = inputVal.style.backgroundColor;
    var color1 = "red";
    var color2 = "yellow";
    var color3 = "blue";
    switch (currentcolor) {
        case color1:
            inputVal.style.backgroundColor = color2;
        break;
        case color2:
            inputVal.style.backgroundColor = color3;
        break;
        default:
            inputVal.style.backgroundColor = color1;
            break;
    }
} // function Lower()
  function Lower() {
    var inputVal = document.getElementById("subEmail2");
    var currentcolor = inputVal.style.backgroundColor;
    var color3 = "#FF0000";
    var color2 = "#FFFF00";
    var color1 = "#0000FF";
    switch (currentcolor) {
        case color1:
            inputVal.style.backgroundColor = color2;
        break;
        case color2:
            inputVal.style.backgroundColor = color3;
        break;
        default:
            inputVal.style.backgroundColor = color1;
            break;
    }
} // function Lower()
</script>

JSFiddle

这一行中没有正确获得十六进制值,因此switch语句将始终计算default

var currentcolor = inputVal.style.backgroundColor;

尝试记录或调试该变量的值。

在这里,您有一个关于如何使用javascript实现这一点的好答案。

我认为代码的其余部分看起来不错。

最新更新