的Javascript的onclick功能犯規執行（錯誤日誌 - 沒有定義）

Question

我不能讓這對我的生活......

我試圖做如果屏幕清晰度是被隱藏的移動友好的導航小於600像素，並出現一個按鈕來切換菜單不透明度。

https://jsfiddle.net/ef3mezk5/

這裏是小提琴......我在的onclick簡單地定義功能越好 -

<div class="menu-icon-black" id="menu-icon" onclick="menudrop()"> 

我使用的是這裏擁有JS引擎的代碼是一個單獨的文件其負責的菜單的部分下降

function menudrop() { 
    document.getElementById("menu-icon").classList.toggle("change"); 

    document.getElementById("navlist").classList.toggle("show"); 
    } 

未捕獲的ReferenceError：menudrop不是在限定 HTMLDivElem ent.onclick（（index）：169）

而我可以看到它的清晰定義......這裏發生了什麼？ 有人可以看看這個，告訴我什麼是錯的？

Answer 1

看起來像你選擇不當load type在jsfiddle。而不是load type - on load使用no wrap - in body。

致信@Pointy。

function menudrop() { 
 
    document.getElementById("menu-icon").classList.toggle("change"); 
 

 
    document.getElementById("navlist").classList.toggle("show"); 
 
    }

@media screen and (max-width: 600px) { 
 
    .navlist { 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    right: 15%; 
 
    opacity: 0; 
 
    z-index: 99; 
 
    } 
 
    .navlist li { 
 
    border: none; 
 
    font-size: 25px; 
 
    float: none; 
 
    } 
 
    #menu-icon { 
 
    display: inline-block; 
 
    } 
 
} 
 

 
.navlist { 
 
    width: auto; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    margin-right: 5%; 
 
    -webkit-padding-start: 0px; 
 
    -webkit-margin-before: 0px; 
 
    -webkit-margin-after: 0px; 
 
    font-family: "Roboto", sans-serif; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.navlist li { 
 
    float: left; 
 
    font-size: 14px; 
 
    padding: 10px 15px; 
 
    border-right: 1px solid black; 
 
    list-style: none; 
 
    text-decoration: none; 
 
    position: relative; 
 
} 
 

 
.navlist a { 
 
    color: black; 
 
    text-decoration: none; 
 
    transition: color 0.3s; 
 
    /* vendorless fallback */ 
 
    -o-transition: color 0.3s; 
 
    /* opera */ 
 
    -ms-transition: color 0.3s; 
 
    /* IE 10 */ 
 
    -moz-transition: color 0.3s; 
 
    /* Firefox */ 
 
    -webkit-transition: color 0.3s; 
 
    /*safari and chrome */ 
 
    position: relative; 
 
} 
 

 
.navlist a:hover { 
 
    color: #00bff3; 
 
    position: relative; 
 
} 
 

 
.menu-icon-black { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
.menu-icon-bar1, 
 
.menu-icon-bar2, 
 
.menu-icon-bar3 { 
 
    width: 45px; 
 
    height: 5px; 
 
    background-color: #333; 
 
    margin: 6px 0; 
 
    transition: 0.4s; 
 
} 
 

 

 
/* Rotate first bar */ 
 

 
.change .menu-icon-bar1 { 
 
    -webkit-transform: rotate(-45deg) translate(-9px, 7px); 
 
    transform: rotate(-45deg) translate(-9px, 7px); 
 
} 
 

 

 
/* Fade out the second bar */ 
 

 
.change .menu-icon-bar2 { 
 
    opacity: 0; 
 
} 
 

 

 
/* Rotate last bar */ 
 

 
.change .menu-icon-bar3 { 
 
    -webkit-transform: rotate(45deg) translate(-8px, -8px); 
 
    transform: rotate(45deg) translate(-8px, -8px); 
 
} 
 

 
.show { 
 
    opacity: 1 !important; 
 
}

<ul class="navlist" id="navlist"> 
 
    <li><a href="">Начало</a></li> 
 
    <li><a href="">Планограма</a></li> 
 
    <li><a href="">Запитване</a></li> 
 
    <li><a href="">Реклама при нас</a></li> 
 
</ul> 
 
<div class="menu-icon-black" id="menu-icon" onclick="menudrop()"> 
 
    <div class="menu-icon-bar1"></div> 
 
    <div class="menu-icon-bar2"></div> 
 
    <div class="menu-icon-bar3"></div> 
 
</div>