包含物化可折叠导航栏后，本地 javascript 停止工作答案

【问题标题】：Local javascript stopped working after including materialize collapsable navbar包含物化可折叠导航栏后，本地 javascript 停止工作
【发布时间】：2021-07-15 05:29:15
【问题描述】：

因此，在包含使我的导航栏变成移动设备上的汉堡包所需的物化 JavaScript 代码后，我的项目的 JavaScript 停止工作。我尝试将我的文件放在 html 的底部、导航栏脚本之前和之后。每次都是一样的，汉堡包和物化 js 工作，但我用于密码验证的 js 文件没有。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register Page</title>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Our own style sheet -->        
    <link rel="stylesheet" href="style.css">

    <!-- For icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
          var elems = document.querySelectorAll('.sidenav');
          var instances = M.Sidenav.init(elems);
        });
    </script>


</head>
<body>

  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="register.html">Register</a></li>
        <li><a href="contactus.html">Contact</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="register.html">Register</a></li>
    <li><a href="contactus.html">Contact</a></li>
  </ul>
    <div class="contact-box">
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">account_circle</i>
                        <input id="icon_prefix" type="text" class="validate">
                        <label for="icon_prefix">Full Name</label>
                    </div>
                    <div class="input-field col s12">
                        <i class="material-icons prefix">email</i>
                        <input id="icon_prefix" type="email" class="validate">
                        <label for="icon_prefix">Email</label>
                    </div>
                    <div class="input-field col s12">
                        <i class="material-icons prefix">password</i>
                        <input id="psw" type="password" name="psw" class="validate" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
                        <label for="icon_prefix">Password</label>
                    </div>
                        <button class="btn waves-effect waves-light" type="submit" name="action">Submit
                            <i class="material-icons right">send</i>
                        </button>
                </div>
            </form>
        </div>
    </div>
ss3
<div id="message">
  <h5>Password must contain the following:</h5>
        <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
        <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
        <p id="number" class="invalid">A <b>number</b></p>
        <p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>

<script type="text/javascript" src="validation.js"></script>
</body>
</html>

这是validation.js文件：

 // Script for validating password. This code was authored by w3schools at the url: https://www.w3schools.com/howto/howto_js_password_validation.asp

var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");

// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}

// When the user starts to type something inside the password field
myInput.onkeyup = function() {
  // Validate lowercase letters
  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
}

  // Validate capital letters
  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  // Validate numbers
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }

  // Validate length
  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}

我是否将我的 JavaScript 文件放在了错误的区域？我也试过把它放在身体里，结果也一样。对此的任何帮助将不胜感激:)

【问题讨论】：

您在浏览器控制台中看到任何错误吗？
是的，我得到了以下信息：在页面完全加载之前强制布局。如果尚未加载样式表，这可能会导致无样式内容的闪烁。未捕获的类型错误：myInput 为空 localhost/frontendcc/validation.js:10
myInput is null - 这就是问题
嗯，是的，但为什么它为空，我该如何解决？没有移动导航栏所需的 js，它可以正常工作。
确实，为什么它为空 - 我看不到导致错误的代码，但你可以

标签： javascript html css materialize

【解决方案1】：

请将你的JS文件放在<body>标签的末尾。像这样，

<body>
...
...
<div id="message">
  <h5>Password must contain the following:</h5>
        <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
        <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
        <p id="number" class="invalid">A <b>number</b></p>
        <p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
...
...
<script>
  document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems);
    });
</script>

<!-- my own JavaScript file -->
 <script type="text/javascript" src="validation.js"></script>
</body>

另外，请在您的文件中使用一个侦听器，以了解整个文档已首先加载，以便您的代码将获取它正在寻找的 DOM。

window.addEventListener('load', (event) => {
   // Script for validating password. This code was authored by w3schools at the url: https://www.w3schools.com/howto/howto_js_password_validation.asp

   var myInput = document.getElementById("psw");
   var letter = document.getElementById("letter");
   var capital = document.getElementById("capital");
   ...
   ...
});

如果您不关心样式表的加载，也可以使用DOMContentLoaded。

【讨论】：

我做了你所说的一切，但它仍然对我不起作用:(谢谢
你能从控制台给出错误日志吗？
在页面完全加载之前强制布局。如果尚未加载样式表，这可能会导致无样式内容的闪烁。