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?

@SamridhTuladhar , it is still not working even with display: none and display: block; — Add it yeah
– Add it yeah, Commented Nov 17, 2020 at 8:58
Element.style only returns the inline style of the element I think, and since it doesn't have any, it's returning "". — Oskar Grosser
– Oskar Grosser, Commented Nov 17, 2020 at 8:59
You could remove the second 'if'-condition, it should work then. — Oskar Grosser
– Oskar Grosser, Commented Nov 17, 2020 at 9:00

Tomalak · Accepted Answer · 2020-11-17 09:53:08Z

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.

ourmaninamsterdam · Accepted Answer · 2020-11-17 09:00:17Z

2

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";
    }
});

answered Nov 17, 2020 at 9:00

ourmaninamsterdam

2,5321 gold badge18 silver badges14 bronze badges

Comments

Roberto Caboni · Accepted Answer · 2020-11-17 09:11:59Z

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>

Myat Su · Accepted Answer · 2020-11-17 10:09:19Z

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.

Collectives™ on Stack Overflow

Visibility of input tag not changing with JavaScript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related