Question

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

下面的提升功能按预期工作（循环显示颜色）。较低的功能没有，唯一的区别是从文本到十六进制的颜色分配。

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

Answer 1

您未在此行中正确获取十六进制值，因此switch语句将始终评估default。

var currentcolor = inputVal.style.backgroundColor;

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

Here你对如何使用javascript做了很好的答案。

我认为其余的代码看起来很好。

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

1 个答案: