Why do these divs not get hidden and revealed?

Question

I can't figure out why the following code will unhide the target elements, but won't hide them. The list msg is received from a websocket. It is of the form:

"Line, 4, Auto"
"Line, 4, Heat"
"Line, 4, Cool"
"Line, 4, Fan"
"Line, 4, Off"

After pushing the list into the array matrix, I use switch blocks to enter the switch block for array[2]. The code properly unhides the element when appropriate, but won't hide them.

// dummy code
var lines = `Line 4, Heat;Line, 4, Cool;Line, 4, Auto;Line, 4, Fan;Line, 4, Off`.split(";");

lines.forEach(function(msg) {HideUnhide(msg) })

function HideUnhide(msg) {
// end dummy code
  var array = msg.split(',');
  alert(msg)
  switch (array[0]) {
    case "Line":
      switch (Number(array[1])) {
        case 0:
          document.getElementById("Scale").innerHTML = array[2];
          break;
        case 4:
          document.getElementById("Control").innerHTML = array[2];
          test = array[2];
          switch (test.trim()) {
            case "Auto":
                document.getElementById("Hot").style.visibility = "visible";
                document.getElementById("Cold").style.visibility = "visible";
                break;
            case "Heat":
                document.getElementById("Hot").style.visibility = "visible";
                document.getElementById("Cold").style.visibility = "invisible";
                break;
            case "Cool":
                document.getElementById("Hot").style.visibility = "invisible";
                document.getElementById("Cold").style.visibility = "visible";
                break;

              default:
                document.getElementById("Hot").style.visibility = "invisible";
                document.getElementById("Cold").style.visibility = "invisible";
                break;
          }
      }
  }
}

div.Hot {
  position: fixed;
  top: 75px;
  left: 24px;
  width: 100px;
  font: 20px Arial Bold;
  color: rgb(200, 200, 200);
}

div.Cold {
  position: fixed;
  top: 50px;
  left: 24px;
  width: 100px;
  font: 20px Arial Bold;
  color: rgb(200, 200, 200);
}
div.Control {
        position: fixed;
        top: 25px;
        left: 24px;
        width: 100px;
        font: 20px Arial Bold;
        color: rgb(200,200,200);
}
div.Scale {
        position: fixed;
        top: 0px;
        left: 24px;
        width: 100px;
        font: 20px Arial Bold;
        padding-right: 30px;
        color: rgb(200,200,200);
}

<div id="Hot" style="visibility: hidden; color:rgb(200,200,200)" class="Hot">Cool: 70.0</div>
<div id="Cold" style="visibility: hidden; color:rgb(200,200,200)" class="Cold">Heat: 64.0</div>
<div ID="Scale" style="color:rgb(200,200,200)" class="Scale">&#8457;</div>
<div ID="Control" style="color:black" class="Control">Cool</div>

Might there be leading or trailing whitespace in `array[2]`? You could use something like the `strip` method to remove it. — Scott Hunter, Jul 10 '19 at 14:50
I think that you have to trim the whitespace. In the first case you get it trimmed by the Number() call, but in the second case you try to match " Auto" with "Auto". — Johannes Stadler, Jul 10 '19 at 14:51
Also your code is not complete. Please click `[<>]` snippet editor and produce a [mcve] for example using `var lines = \`Line, 4, Auto Line, 4, Heat Line, 4, Cool Line, 4, Fan Line, 4, Off\`.split(/\n/); lines.forEach(msg => { .... })` — mplungjan, Jul 10 '19 at 15:03
You don't need braces around switch statement cases in this situation. See [this](https://stackoverflow.com/questions/42480949/what-do-the-curly-braces-do-in-switch-statement-after-case-in-es6) for when to use them and what they're used for. — meyi, Jul 10 '19 at 15:18
I've modified your question to include the code as a runnable snippet. Please fix your syntax errors (or comment them out if they aren't valuable) so that we can replicate the issue you describe. (Your 'placeholder' `forEach`, as well as the invalid `switch` syntax - there shouldn't be a `:`) — Tyler Roper, Jul 10 '19 at 17:12

score 0 · Answer 1 · answered Jul 10 '19 at 15:19

0

The array element you are passing is " Auto", where your switch statement is looking for "Auto", notice the white space. You could change the way the message is created at origin, or you can check for white space and remove it, or edit your switch statement to accommodate for it. I would recommend removing the space at message creation if that is an option and does not create more work elsewhere.

answered Jul 10 '19 at 15:19

Steve Bohmbach

327
1
11

1

`string.trim()` is a useful recommendation. – Barmar Jul 10 '19 at 15:25
IM not sure if you are copying directly, but you are missing some curly brackets also. – Steve Bohmbach Jul 10 '19 at 16:11
Thanks. No, I didn't copy directly. I had to remove chunks of code here and there to make this example fully relevant to the issue at hand. I accidentally removed a brace. – lrhorer Jul 10 '19 at 16:26

lrhorer · Accepted Answer · 2019-09-02T17:17:20.870

0

I found the problem. The syntax is:

document.getElementById("Hot").style.visibility = "hidden";

not:

document.getElementById("Hot").style.visibility = "invisible";

edited Sep 02 '19 at 17:17

answered Jul 11 '19 at 13:45

lrhorer

373
1
3
12

Why do these divs not get hidden and revealed?

2 Answers2