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

Question

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?

The jsfiddle site is wrapping your code inside another function that's set up as the "load" event handler. You can configure it to do otherwise, but that's the default. — Pointy
– Pointy, Commented Feb 27, 2017 at 17:06
If you click on options in fiddle, and choose load type "No wrap - in <head>", it will work — Armin
– Armin, Commented Feb 27, 2017 at 17:06

kind user · Accepted Answer · 2017-02-27 20:02:04Z

2

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>

edited Feb 27, 2017 at 20:02

answered Feb 27, 2017 at 17:05

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Pointy Over a year ago

It's not an error; by default jsfiddle wraps all the JavaScript code in a "load" handler, so all the symbols defined are local to that function.

Denislav Karagiozov Over a year ago

it doesnt run on my website :D the site isnt live its on my local machine but the code is the same.... i cant figure out whats going on

Armin Over a year ago

Where are you including your js?

Pointy Over a year ago

Again, by default jsfiddle wraps all the code in the JavaScript pane inside a function. That function is set up as a "load" event handler. Because all the code is wrapped in a function, none of the symbols declared are global. When you use "onclick" etc to set up handlers, the functions referenced must be global. So it's not a bug; it's intended behavior on the part of jsfiddle. That behavior can be changed via the options menu in the JavaScript panel.

Denislav Karagiozov Over a year ago

hell what do I know about life.. well it works on jsfiddle now but not on my website... guess im gonna start rebuilding from ground 0 than :D thanks for the help tho , its gonna help me diagnose problems easier now

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related