Question

我的<script>部分出现问题。我得到的错误是ReferenceError: menudrop is not defined。

这是我的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>

Answer 1

此行存在问题：

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

一旦脚本在这里收到错误，我就会停止执行脚本，所以它永远不会得到你定义函数menudrop的点......所以函数是未定义的。

另外，你调用menudrop（）没有任何参数，但是函数需要一个参数menudrop（dis），一旦你解决了上面的问题，你就会遇到另一个问题，因为它试图引用的dis不是全局的dis，但你永远不会过去的param dis。

你的定义应该是这样的：

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

另外，从函数中移除dis作为参数，并在正文中的div之后移动脚本以确保当你执行get元素时，id＆＃39; sftext＆＃39;已定义。

试试下面的代码：

<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>

Answer 2

var dis =.nav.ul.li.a.style.display;旁边的第一个.（在哪个控制台上会向您抛出错误）将是巧妙的，但不是以DOM中的元素为目标的方式。 ..

嗯......除非你真的有一个像

这样的对象

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

确保您在结束<script>标记之前放置了</body>标记，以确保解析器读取所有元素
不要使用内联JS（onclick="menudrop()"），这很难维护。将您的逻辑放在一个地方，远离HTML
目标元素使用，即：document.querySelectorAll("selector")（或任何其他适当的方法来查询DOM元素[Goog和StOve是你的朋友]），如：

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
}

所以我不知道你有什么计划定位a nchors，但你应该这样：

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

引用不在HTML中工作的函数

2 个答案: