Visibility of input tag not changing with JavaScript

Question

When clicking on the search icon (🔍) the input's visibility (type="text") does not change even though it has been specified in the JS code.

var searchIcon = document.getElementById("search-icon"); // the search icon
var searchBox_input = document.getElementById("search-box");
searchIcon.addEventListener("click", function() {
    if(searchBox_input.style.visibility == "hidden") {
        searchBox_input.style.visibility = "visible";
    } else if(searchBox_input.style.visibility == "visible") {
        searchBox_input.style.visibility = "hidden";
    }
});

#search-box {
    position: absolute;
    visibility: hidden;
    top: 0px;
    left: 120px;
    height: 100%;
    width: 130px;
    border-radius: 2px;
}

#search-box:hover {
    border: 2px solid darkgrey;
}

#search-icon {
    position: absolute;
    top: 0px;
    left: 80px;
}

#search-icon:hover {
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

<div id="taskbar">
        <div id="start" class="btn">MyOS</div>
        <div id="search">
            <div id="try"><i id="search-icon">🔍</i><input type="text" placeholder="Type here to search" id="search-box"></div>
        </div>
    </div>

Why? How do I fix it?

Answer 1

var searchIcon = document.getElementById("search-icon"); // the search icon
var searchBox_input = document.getElementById("search-box");
searchIcon.addEventListener("click", function() {
    if(searchBox_input.style.visibility == "visible") {
        searchBox_input.style.visibility = "hidden";
    } else{
        searchBox_input.style.visibility = "visible";
    }
});

#search-box {
    position: absolute;
    visibility: hidden;
    top: 0px;
    left: 120px;
    height: 100%;
    width: 130px;
    border-radius: 2px;
}

#search-box:hover {
    border: 2px solid darkgrey;
}

#search-icon {
    position: absolute;
    top: 0px;
    left: 80px;
}

#search-icon:hover {
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

<div id="taskbar">
        <div id="start" class="btn">MyOS</div>
        <div id="search">
            <div id="try"><i id="search-icon">🔍</i><input type="text" placeholder="Type here to search" id="search-box"></div>
        </div>
    </div>

if you change like above code, you can change textbox visibility.

Answer 2

The .style property only contains the styles that have been defined on the element itself, not the styles the element has inherited through its CSS class or ID.

Therefore, searchBox_input.style.visibility is "" at the start. You can then override this with your value, which then takes precedence over what has been defined in the CSS.

In short, CSS definitions are fixed. You do not change them with JS code like this. You can only define overrides.

A tiny change to your if/else accommodates the situation:

var searchIcon = document.getElementById("search-icon");
var searchBox_input = document.getElementById("search-box");

searchIcon.addEventListener("click", function() {
    if(searchBox_input.style.visibility == "visible") {
        searchBox_input.style.visibility = "hidden";
    } else {
        searchBox_input.style.visibility = "visible";     // when it's still "", it also goes here
    }
});

#search-box {
  position: absolute;
  visibility: hidden;
  top: 0px;
  left: 120px;
  height: 100%;
  width: 130px;
  border-radius: 2px;
}

#search-box:hover {
  border: 2px solid darkgrey;
}

#search-icon {
  position: absolute;
  top: 0px;
  left: 80px;
}

#search-icon:hover {
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

<div id="taskbar">
  <div id="start" class="btn">MyOS</div>
  <div id="search">
    <div id="try"><i id="search-icon">🔍</i><input type="text" placeholder="Type here to search" id="search-box"></div>
  </div>
</div>

Overall I would recommend defining an invisible CSS class like .invisible { visibility: hidden; } and toggling that class in JS code (via classList.toggle()), instead of adding and removing actual CSS definitions.

Answer 3

In order to get the style property, use getComputedStyle(searchBox_input). Otherwise, as you can easily see logging searchBox_input.style.visibility, the value is empty (""):

var searchIcon = document.getElementById("search-icon"); // the search icon
var searchBox_input = document.getElementById("search-box");

style1 = window.getComputedStyle(searchBox_input),

searchIcon.addEventListener("click", function() {
    if(style1.visibility == "hidden") {
        searchBox_input.style.visibility = "visible";
    } else if(style1.visibility == "visible") {
        searchBox_input.style.visibility = "hidden";
    }
});

#search-box {
    position: absolute;
    visibility: hidden;
    top: 0px;
    left: 120px;
    height: 100%;
    width: 130px;
    border-radius: 2px;
}

#search-box:hover {
    border: 2px solid darkgrey;
}

#search-icon {
    position: absolute;
    top: 0px;
    left: 80px;
}

#search-icon:hover {
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

<div id="taskbar">
        <div id="start" class="btn">MyOS</div>
        <div id="search">
            <div id="try"><i id="search-icon">🔍</i><input type="text" placeholder="Type here to search" id="search-box"></div>
        </div>
    </div>

Answer 4

Try window.getComputedStyle(searchBox_input).visibility (MDN)

var searchIcon = document.getElementById("search-icon"); // the search icon
var searchBox_input = document.getElementById("search-box");
searchIcon.addEventListener("click", function() {
    if(window.getComputedStyle(searchBox_input).visibility == "hidden") {
        searchBox_input.style.visibility = "visible";
    } else if(window.getComputedStyle(searchBox_input).visibility == "visible") {
        searchBox_input.style.visibility = "hidden";
    }
});