How to change CSS style.display with javascript

Question

in my webpage the menu has a structure like this:

<nav id="menu">
      <label for="tm" id="toggle-menu">Menù <span class="drop-icon">▾</span></label>
      <input type="checkbox" id="tm">
      <ul class="main-menu clearfix">
        <li><a href="http://www.internalsite.lab/">Home</a></li>
        <li><a href="#">Transfer 
            <span class="drop-icon">▾</span>
            <label title="Toggle Drop-down" class="drop-icon" for="sm1">▾</label>
            </a>
            <input type="checkbox" id="sm1">
              <ul class="sub-menu">
                <li><a href="data.html">internal data</a></li>
                <li><a href="data_ext.html">external data</a></li>
              </ul>
        </li>
        <li class="imp"><a href="necessary.html">Necessary Data</a></li>
      </ul>
    </nav>

and a CSS like this:

    #menu .main-menu {
      display: block;
    }

    #menu li, 
    #toggle-menu,
    #menu a {
      position: relative;
      display: block;
      color: white;
      text-transform: capitalize;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
    }  

    #menu .main-menu li.imp{
      display: none;
    }

    #menu .main-menu li{
        background-color: #197dd1;
        font-weight: bold;
      }

I would like to change the display none of the #menu .main-menu li.imp into block if a certain condition occurs, for this reason i have a js code like this

<script "application/javascript">
var javaScriptVar = "<?php echo $value; ?>";
if( value== "true") { document.getElementsByClassName('imp').style.display = 'block';}
</script>

I'am sure that value is equal true, but it does not work.

Any idea? Thank you very much

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — evolutionxbox, Mar 01 '21 at 12:37
Why do you expect `document.getElementsByClassName('imp')` to have a `style` property with a `display` setter? Also, `var javaScriptVar = "";` isn’t guaranteed to work. Please see [Pass a PHP string to a JavaScript variable (and escape newlines)](https://stackoverflow.com/q/168214/4642212). — Sebastian Simon, Mar 01 '21 at 12:37
Shouldn't `if( value== "true")` be `if( javaScriptVar == "true")`? I not, then where does `value` come from and what's the point of `javaScriptVar`? And does `$value` contain a boolean (true) or the string literal "true"? If it's a boolean, then `echo $value` would output `1`, not the string "true". — M. Eriksson, Mar 01 '21 at 12:44
@evolutionxbox thank you but if i put var elems = document.getElementsByClassName('imp'); alert(elems.length) i obtain 0, is a problem of the HTML tag? — Andrea, Mar 01 '21 at 12:49

score 0 · Answer 1 · answered Mar 01 '21 at 12:44

document.getElementsByClassName is returning a node list rather than a single element.

document.getElementsByClassName('imp').style.display = 'block'

is code that would only affect a single element... it cannot work with a node list. You either would need to loop through the node list and apply this to each individual item, or change document.getElementsByClassName to something like document.getElementById that would only return one item.

score 0 · Answer 2 · answered Mar 01 '21 at 13:09

The problem is the function getElementsByClassName, this returns a node list / HtmlCollections, you have to iterate the nodes.strong text

for example, the id of elements is unique and you use getElementByid this returns a just node.

You can trie:

document.querySelectorAll('.imp').forEach(function(e) {
    e.style.display = 'none'
})

How to change CSS style.display with javascript

2 Answers2