Changing the display of an element via Javascript?

Question

I have a search bar with a toggle button directly above it. The toggle works just fine, but my issue is that I want the form to start disabled. My toggle button utilizes the display property, but when I set that property through CSS as disabled, the toggle no longer works. I also found that there isn't an attribute for that in HTML, so I'm pretty lost. Here's my Javascript spun into my HTML:

function ToggleSearchBar() {
  var searchbar = document.getElementById("SearchBar");
  if (searchbar.style.display == "none") {
    searchbar.style.display = "";
  } else {
    searchbar.style.display = "none";
  }
}

.search-button form {
  display: none;
  padding-top: 10px;
}

<div class="search-button">
  <p onclick="ToggleSearchBar()">Search</p>
  <form id="SearchBar">
    <input type="text" placeholder="Your query here">
  </form>
</div>

So to reiterate, I just need the form element to start with a display of none, while still allowing for my Javascript to function as intended. Any help would be appreciated. Thanks!

I'm not disabling it. I'm simply setting the display property to "none". — Chris Lallo
– Chris Lallo, Commented Feb 20, 2019 at 16:36

ashish singh · Accepted Answer · 2019-02-20 16:46:10Z

8

the problem here is element.style.display accesses inline style property to get the property applied to the element you can use getComputedStyle function

    function ToggleSearchBar() {
        var searchbar = document.getElementById("SearchBar");
       var display = getComputedStyle(searchbar).display;

        if (display == "none") {
                searchbar.style.display = "block";
            } else {
                searchbar.style.display = "none";
            }
        }

.search-button form {
    display: none;
    padding-top: 10px;
}

<div class = "search-button">
        <p onclick = "ToggleSearchBar()">Search</p>
        <form id = "SearchBar">
            <input type = "text" placeholder = "Your query here">
        </form>
    </div>

and you have to use display block instead of empty string as you have a css declaration of none.

answered Feb 20, 2019 at 16:46

ashish singh

6,9142 gold badges18 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Lallo Over a year ago

That's perfect. Thanks so much

Maheer Ali · Accepted Answer · 2019-02-20 16:42:52Z

4

This is because when you set display="" it will use its css style which is none. You should change display to block.
For hide/show purpose I would suggest you to use Ternary operator

function ToggleSearchBar() {
  var searchbar = document.getElementById("SearchBar");
  if(searchbar.style.display === '') searchbar.style.display = 'block'
  else searchbar.style.display = searchbar.style.display === 'none' ? 'block' : 'none' 
}

.search-button form {
        display: none;
        padding-top: 10px;
    }

<div class = "search-button">
        <p onclick = "ToggleSearchBar()">Search</p>
        <form id = "SearchBar">
            <input type = "text" placeholder = "Your query here">
        </form>
    </div>

edited Feb 20, 2019 at 16:42

answered Feb 20, 2019 at 16:36

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

3 Comments

Chris Lallo Over a year ago

That worked great. Thanks a lot. I'll accept your answer once the site allows it

KevBot Over a year ago

The only issue with this approach is that style.display looks up inline style properties on the HTML element. If you notice in the running example, you have to press "Search" twice in order for it to show up the first time, then it works normally afterward.

Maheer Ali Over a year ago

I have fixed that.

Collectives™ on Stack Overflow

Changing the display of an element via Javascript?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related