Question

177

Changing the display of an element via Javascript?

rated 0 times [ 184] [ 7] / answers: 1 / hits: 8200 / 5 Years ago, wed, february 20, 2019, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kinsley

Add To Favorites

Follow

Total Points: 352

Total Questions: 84

Total Answers: 94

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

kinsley questions

1 Module not found: Can't resolve '@material-ui/lab/TabContext' in '/home/sanika/Desktop/Coding/React/my-forms/src/Components'

Sat, Aug 21, 21, 00:00, 3 Years ago

1 TypeError [ERR_HTTP_INVALID_HEADER_VALUE] for Algolia with Firebase

Mon, Jul 20, 20, 00:00, 4 Years ago

1 ReactJS: propTypes validation for array of objects

Mon, Nov 25, 19, 00:00, 5 Years ago

1 styled-components: extend styles and change element type

Sat, Apr 20, 19, 00:00, 5 Years ago

1 AWS CDK user pool authorizer

Tue, Oct 9, 18, 00:00, 6 Years ago

View All

answered 5 Years ago paolam · Accepted Answer

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.