Denislav Karagiozov Denislav Karagiozov -4 years ago 256
HTML Question

Javascript onclick function doesnt execute (error log - not defined)

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?

Answer Source

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

Credits to @Pointy.

enter image description here

  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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download