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实现这一点的好答案。
我认为代码的其余部分看起来不错。