Referencing a function not working in HTML

Question

I am having issues with my <script> section. The error i get is ReferenceError: menudrop is not defined.

Here's my HTML:

<!DOCTYPE html>
<html>
  <!--Home-->
<head>
  <!--Header-->
  <title>Stewardship Foundation</title>
  <link href="Images/favicon.ico" rel="icon" />
  <link href="Styling/style.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <script>
  var  dis =.nav.ul.li.a.style.display;
  function menudrop(dis){
    if(dis =='inline-block'){
        dis='none';
    } else {
        dis='inline-block';
    }
  }
  </script>


</head>

<body>
  <!--Navigation Bar-->
  <div class="nav">
    <a id="logo" href="index.html"><img src="Images/sflogo.jpg" alt="sflogo"  /></a>
    <button onclick= "menudrop()" class="menu" ><div></div></button>
      <ul>
        <li id="sftext">Stewardship Foundation</li>
        <li class="active">Home</li>
        <li><a href="pages/about.html">About Us</a></li>
        <li><a href="pages/support.html">Who We Support</a></li>
        <li><a href="pages/contact.html">Contact Us</a></li>
        <li class="donate"><a href="pages/donate.html">Donate</a></li>
      </ul>
  </div>

</body>
</html>

You have some odd syntax when you set the `var dis`.... Surely your console is telling you this? — Stuart, Mar 29 '16 at 21:58
How should i reference the display styling of my links in the nav? I don't have jquery yet — Kermit, Mar 29 '16 at 22:00

Sergio Fernandez · Answer 1 · 2016-03-29T22:29:24.260

there is a problem with this line:

var  dis =.nav.ul.li.a.style.display;

as soon as the script gets an error here, i stop executing the script, so it never gets the the point where you define the function menudrop.. and so the function is undefined.

also, you call menudrop() without any parameters, yet the function expects a parameter menudrop(dis), once you fix the above problem you will have another problem because the dis it will try to reference is not the global dis, but the param dis which you never passed.

you dis definition should be something like:

var dis = document.getElementById('sftext').style.display;

also, remove dis as a param from the function, and move the script after the div inside the body to make sure when you do a get element, the id 'sftext' is already define.

try the code bellow:

<html>
  <!--Home-->
<head>
  <!--Header-->
  <title>Stewardship Foundation</title>
  <link href="Images/favicon.ico" rel="icon" />
  <link href="Styling/style.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />


</head>

<body>
  <!--Navigation Bar-->
  <div class="nav">
    <a id="logo" href="index.html"><img src="Images/sflogo.jpg" alt="sflogo"  /></a>
    <button onclick= "menudrop()" ><div>button</div></button>
      <ul>
        <li id="sftext">Stewardship Foundation</li>
        <li class="active">Home</li>
        <li><a href="pages/about.html">About Us</a></li>
        <li><a href="pages/support.html">Who We Support</a></li>
        <li><a href="pages/contact.html">Contact Us</a></li>
        <li class="donate"><a href="pages/donate.html">Donate</a></li>
      </ul>
  </div>

  <script>
var dis = document.getElementById('sftext').style.display;
  function menudrop(){
    if(dis =='inline-block'){
        dis='none';
    } else {
        dis='inline-block';
    }
  }
  </script>

</body>
</html>

Roko C. Buljan · Answer 2 · 2016-03-29T22:22:43.217

var dis =.nav.ul.li.a.style.display; beside the first . (on which console will throw errors at you) would be ingenious™, but it's not the way to target Elements in the DOM...

well... unless you really have an object like

var nav = {ul:{li:{a:{style:{display:"inline-block"}}}}}; // Don't think so

Make sure you've placed your <script> tags right before your closing </body> tag to make sure all the elements are read by the parser
Don't use inline JS (onclick="menudrop()"), it's hard to maintain. Keep your logic in one place, away from the HTML
Target elements using i.e: document.querySelectorAll("selector") (or any other proper method to query DOM elements [Goog and StOve are your friends]) like:

var menuBtn = document.querySelectorAll('.menu');
[].forEach.call(menuBtn, function(el){
    el.addEventListener("click", menudrop, false);
});

function menudrop() {
    // It's totally unclear what are your plans about this...
    // what anchor you want to target for the `display` property and why?
    console.log("menudrop yey!"); // learn to open console and read messages
}

So I don't know what are your plans about targeting the anchors, but you should go this way:

var anchors = document.querySelectorAll(".nav li a");

Referencing a function not working in HTML

2 Answers2