When clicking on an icon, a function should be called that looks, if the element has properties: display: none, then make it display: block, and vice versa.

There are no errors in the console

function AdaptiveMenu() { var Adaptive = document.getElementById('menu'); var AdaptiveStyle = getComputedStyle(Adaptive); if (AdaptiveStyle.display == 'none') { AdaptiveStyle.display == 'block'; }; } 
 .ico { margin-left: 20px; } .rect { width: 30px; height: 6px; background-color: black; margin-top: 3px; } .menu { display:none; } 
 <div class="ico" onclick='AdaptiveMenu'> <div class="rect"></div> <div class="rect"></div> <div class="rect"></div> </div> <nav class="menu" id="menu"> <ul> <li>lit-item</li> <li>lit-item</li> <li>lit-item</li> <li>lit-item</li> </ul> </nav>

  • one
    Give a minimal, self-sufficient and reproducible example with an icon, an element, and element styles - andreymal
  • one
    и наоборот. - where is your "opposite"? - Alexey Shimansky
  • I haven’t done the opposite yet. - uzi_no_uzi
  • jsfiddle.net/Laa3yqby/5 - That's the problem. - uzi_no_uzi
  • one
    You have at least three errors: 1) you do not call a function, you need to add brackets onclick='AdaptiveMenu()' ; 2) instead of assignment, you make a comparison, you need this: AdaptiveStyle.display = 'block'; ; 3) This line will not work anyway, because this is a read-only style object, the styles need to be changed near the element itself: Adaptive.style.display = 'block'; - andreymal

1 answer 1

Description of errors in the comments in the code

 var Adaptive = document.getElementById('menu'); function AdaptiveMenu() { // не var AdaptiveStyle = getComputedStyle(Adaptive) , а var AdaptiveStyle = getComputedStyle(Adaptive).getPropertyValue('display'); if (AdaptiveStyle == 'none') { // ты проверяешь в условии AdaptiveStyle.display == 'block'; //а потом по мимо тог, что присваеваешь стили не той переменной // ты не присваеваешь а сравниваешь //AdaptiveStyle.display == 'block'; Adaptive.style.display = 'block'; } else { Adaptive.style.display = 'none'; } } 
 .ico { margin-left: 20px; } .rect { width: 30px; height: 6px; background-color: black; margin-top: 3px; } #menu { display: none; } 
 <!-- не AdaptiveMenu, а AdaptiveMenu() --> <div class="ico" onclick="AdaptiveMenu()"> <div class="rect"></div> <div class="rect"></div> <div class="rect"></div> </div> <nav class="menu" id="menu"> <ul> <li>lit-item</li> <li>lit-item</li> <li>lit-item</li> <li>lit-item</li> </ul> </nav>