Question

我对Java的奇迹还比较陌生，无法在这个问题上取得突破。我已经进行了一些故障排除，并且可以确定我的JS文件正在加载，但是我无法在其中执行任何操作-JS代码在HTML中可以很好地内联。

相关代码：

function mobileNavBar() {
  var x = document.getElementById("nav-bar-ul");
  if (x.className === "nav-bar-links") {
    x.className += "responsive";
  } else {
    x.className = "nav-bar-links";
  }
}

<!DOCTYPE html>

<head>
  <title>Testing</title>
  <script src="myScripts.js"></script>
  <link rel="stylesheet" href="https://use.typekit.net/lye7pws.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style-template.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
</head>

<body>
  <nav id="nav-bar">
    <a href="#" class="logo-link">
      <div class="logo" id="firstName">
        <h1>name</h1>
      </div>
      <ul id="logo-list">
        <li>
          <div class="door"></div>
          <div class="knob"></div>
        </li>
        <li>
          <div class="logo" id="lastName">
            <h1>name</h1>
          </div>
        </li>
      </ul>
    </a>
    <ul class="nav-bar-links" id="nav-bar-ul">
      <li><a class="underline" href="#">Play</a></li>
      <li><a class="underline active-underline" href="#">About</a></li>
      <li><a class="underline" href="#">Contact</a></li>
    </ul>
    <a href="javascript:void(0);" class="nav-bar-icon" onclick="mobileNavBar()">
      <img src="images/menu-icon.svg" width="50px" height="50px">
    </a>
  </nav>
</body>

</html>

这是我尝试过的一些事情：

$(document).ready(function(){
    <!-- same script code above -->
}

window.addEventListener('load', function() {
    <!-- same script code above -->
}

最糟糕的是，我可以保持代码内联-但是我宁愿做正确的事情并学习适当的技术。任何建议，我们将不胜感激！

Answer 1

几件事：

1）您说您相信自己的javascript文件已正确加载。根据您在html中的脚本标签，它认为javascript文件位于目录中html文件的旁边（您可能已经有了，但要仔细检查）。

2）当您执行“ x.className + =” response“”时，您将在当前类文本后面追加名称，因此它应该是：“ nav-bar-linkssensitive”，不是类。我认为您要使用的是x.classList.add（“ response”）。

3）您还缺少文档顶部的开头“ HTML”标签。不知道这是实际上的样子还是在示例中以这种方式粘贴。

我将上面的代码复制到test.html文件和test.js文件中，确实看到链接按下时触发了.js函数，但是就像我在＃2中提到的那样，我看到的类创建错误。

您如何在HTML中正确调用JS函数？

1 个答案: