Javascript onclick函数不执行（错误日志 - 未定义） [英] Javascript onclick function doesnt execute (error log - not defined)

问题描述

我无法为我的生活获得这个...

我试图制作一个移动友好导航，如果屏幕分辨率为

  function menudrop（）{document.getElementById（menu-icon）。classList.toggle（change）; 。的document.getElementById（ navlist）classList.toggle（ 节目）; }  

@media screen and（max-width：600px） {.navlist {background-color：white;边框：1px纯黑色;右：15％;不透明度：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;保证金：5％; -webkit-padding-start：0px; -webkit-margin-before：0px; -webkit-margin-after：0px; font-family：Roboto，sans-serif;显示：inline-block; position：relative;}。navlist li {float：left; font-size：14px;填充：10px 15px; border-right：1px纯黑色; list-style：none;文字修饰：无; position：relative;}。navlist a {color：black;文字修饰：无;过渡：颜色0.3s; / *无供应商后退* / -o-transition：颜色0.3s; / * opera * / -ms-transition：color 0.3s; / * IE 10 * / -moz-transition：颜色0.3s; / * Firefox * / -webkit-transition：颜色0.3s; / * safari和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;转换：0.4s;} / *旋转第一个小节* /。改变.menu-icon-bar1 {-webkit-transform：rotate（-45deg）translate（-9px，7px）; transform：rotate（-45deg）translate（-9px，7px）;} / *淡出第二个小节* /。改变.menu-icon-bar2 {opacity：0;} / *旋转最后一个小节* /。change .menu -icon-bar3 {-webkit-transform：rotate（45deg）translate（-8px，-8px）; transform：rotate（45deg）translate（-8px，-8px）;}。show {opacity：1！important;}

 < ul class =navlistid =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-blackid =menu-icononclick = menudrop（） > < div class =menu-icon-bar1>< / div> < div class =menu-icon-bar2>< / div> < div class =menu-icon-bar3>< / div>< / div>  

I can't get this for the life of me...

I've tried to make a mobile friendly nav that gets hidden if the screen res is less than 600px and a button appears that toggles the menu opacity.

https://jsfiddle.net/ef3mezk5/

Here is the fiddle... I have defined the function at the onclick as simply as possible -

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

i am using a separate file that holds the JS engine code here is the portion that is responsible for the menu drop

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

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

Uncaught ReferenceError: menudrop is not defined at HTMLDivElement.onclick ((index):169)

And i can see its clearly defined... what is going on here? Can someone please look into this and tell me whats wrong?

解决方案

Seems like you have chosen improper load type at jsfiddle. Instead of load type - on load use no wrap - in body.

Credits to @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>

这篇关于Javascript onclick函数不执行（错误日志 - 未定义）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！