为什么这些div无法隐藏和显示？

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> 

Answer 1

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.

Answer 2

I found the problem. The syntax is:

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

not:

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