Why will my Javascript SWITCH statement not work on HEX color assignments

Question

JSFiddle is here: https://jsfiddle.net/2Xgfr/829/

Raise function below works as expected (cycle through colors). Lower function does not and the only difference is the assignment of colors from text to hex.

HTML elements

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

JS piece

<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

`console.log(inputVal.style.backgroundColor);` What is the value... Now do you know why it does not work? — epascarello, Nov 14 '15 at 02:15
@tarabyte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch#Examples — Andreas, Nov 14 '15 at 02:17
http://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value — epascarello, Nov 14 '15 at 02:20

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

You are not getting the hexadecimal value properly in this line, so the switchstatement will always evaluate the default.

var currentcolor = inputVal.style.backgroundColor;

Try to log or debug for the value of that variable.

Here you have a great answer on how to do that with javascript.

The rest of the code I think is looking fine.

edited May 23 '17 at 12:30

Community

1
1

answered Nov 14 '15 at 02:22

Cacho Santa

6,846
6
41
73

Why will my Javascript SWITCH statement not work on HEX color assignments

1 Answers1