他にもJavascriptが動作しないのはなぜですか？

Question

私はこのモバイルフレンドリーなナビゲーションメニューを使いこなしていましたが、何らかの理由で私のメニューが開かれます（JS IF文）が、JS ELSE文は閉じませんでした。 ？！

function myFunction(x) { 
 
    x.classList.toggle("change"); 
 
} 
 

 

 
function navChange() { 
 
    var x = document.getElementById("myNav").style.height 
 
    if (x = "0%"){ 
 
    document.getElementById("myNav").style.height = "100%"; 
 
    } else { 
 
    document.getElementById("myNav").style.height = "0%"; 
 
    } 
 
}

.overlay { 
 
    height: 0%; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    overflow-y: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .overlay {overflow-y: auto;} 
 
    .overlay a {font-size: 20px} 
 
    .closebtn { 
 
    font-size: 40px !important; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 25px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    margin: 20px; 
 
    z-index: 12; 
 
} 
 

 
.bar1, .bar2 { 
 
    width: 35px; 
 
    height: 4px; 
 
    background-color: #333; 
 
    margin: 6px 0; 
 
    transition: 0.4s; 
 
} 
 

 
.change .bar1 { 
 
    transform: rotate(-45deg) translate(0px, 0px) ; 
 
    background-color: gray; 
 
} 
 

 
.change .bar2 { 
 
    transform: translate(1px, -10px) rotate(45deg); 
 
    background-color: gray; 
 
}

<div id="myNav" class="overlay"> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 
<div class="container" onclick="myFunction(this), navChange()"> 
 
    <div class="bar1"></div> 
 
    <div class="bar2"></div> 
 
</div>

：それは私が終わっ見えたという単純なものになるかもしれないので、私は、JavaScriptに新たなんだ

PSを閉じて、感謝

は、ここに私が働いているコードです

あなたの時間とエネルギーに感謝します！

Answer 1

すべてEasyBBは本当だったと述べたが、ここではそれはきれいに行うことができる方法の例です：

function myFunction(x) { 
 
    x.classList.toggle("change"); 
 
} 
 

 

 
function navChange() { 
 
    var x = document.getElementById("myNav").clientHeight; // Use clientHeight to get the actual height, ignoring style rules. //.style.height 
 
    if (x == "0"){ // == to compare, = here would set the value, so x would always equal 0. 
 
    document.getElementById("myNav").style.height = "100%"; 
 
    } else { 
 
    document.getElementById("myNav").style.height = "0"; //No reason to use percentage here, as 0% =0px. 
 
    } 
 
}

.overlay { 
 
    height: 0%; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    overflow-y: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .overlay {overflow-y: auto;} 
 
    .overlay a {font-size: 20px} 
 
    .closebtn { 
 
    font-size: 40px !important; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 25px; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    margin: 20px; 
 
    z-index: 12; 
 
} 
 

 
.bar1, .bar2 { 
 
    width: 35px; 
 
    height: 4px; 
 
    background-color: #333; 
 
    margin: 6px 0; 
 
    transition: 0.4s; 
 
} 
 

 
.change .bar1 { 
 
    transform: rotate(-45deg) translate(0px, 0px) ; 
 
    background-color: gray; 
 
} 
 

 
.change .bar2 { 
 
    transform: translate(1px, -10px) rotate(45deg); 
 
    background-color: gray; 
 
}

<div id="myNav" class="overlay"> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 
<div class="container" onclick="myFunction(this), navChange()"> 
 
    <div class="bar1"></div> 
 
    <div class="bar2"></div> 
 
</div>

Answer 2

私が見ているエラーの理由は、あなたの条件で譲渡しているもののためです。我々は次のようになり平等のための割り当ての代わりに、テストを使用しているため

a = 15; 
b = 10; 
if(a = b) alert("hello world"); 

今、今10です。

if(a == b) 

また、あなたはCSSによって設定されているように見えるとstyle.heightは、あなたが探しているものを返さないスタイルプロパティをテストしています。あなたはPXをテストするか、何があるかを調べる必要があります。

var height = window.getComputedStyle(document.getElementById("element")).height; 
var height = parseInt(height,10); 
if(height > 1510) { 
    //do whatever 
}