猿问

Javascript 在 <head> 中无法正确加载

代码不工作，我似乎无法弄清楚为什么。我必须将 javascript 保留在 html 头部，因为它是必需的，我相信那是我出错的地方，它没有正确加载。窗口加载对我来说是新事物，我不确定这是否是正确的方法用它


        ___Javascript___

        window.addEventListener("load", init);

       function validation(){

        var userNme = document.getElementById("username").value;

        var pass = document.getElementById("password").value;

        var id = document.getElementById("student-id").value;

        var success = false;

        var words = /^[A-Za-z]+$/;

        



        if(userNme.match(words)){

            document.getElementsByClassName("one").setAttribute("class", "hidden");

            success = true;

        }

        else{

            document.getElementsByClassName("one").setAttribute("class", "visible"); 

        }


        if(pass.match(/[a-z]/) && pass.match(/[A-Z]/) && pass.match(/[0-9]/)){

            document.getElementsByClassName("two").setAttribute("class", "hidden");

            success = true;

        }

        else{

            document.getElementsByClassName("two").setAttribute("class", "visible"); 

        }


        if(id.length == 9){

            document.getElementsByClassName("three").setAttribute("class", "hidden"); 

            success = true;

        }

        else{

            document.getElementsByClassName("three").setAttribute("class", "visible"); 

        }


        

   }

         function init(){

        var start = document.getElementById("go");

        start.addEventListener("click", validation);

    }

         __HTML__ 

         <input type="text" placeholder="Username" id="username" required>

    <div class="one hidden">

        Username needs to contain only letters

    </div>


    <input type="password" id="password" placeholder="Password" required>

    <div class="two hidden" id="Pword">

        Password needs to have at least one capital letter, one lower case, and one number

    </div>

holdtom
浏览 150回答 2
2回答

慕村225694

这是因为如果<script>在<head>.&nbsp;当您希望 javascript 独立于要挂载的元素执行时，您可以使用<script>in 。<head>如果您的<script>标签试图修改 中的对象DOM，您必须先等待该元素被挂载。编辑：修复 1：<script>将标签保留在这些元素下方。您还可以在另一个文件上使用所有这些 javascript，然后<script src="path/to/js">在脚本中使用的所有元素下方。修复 2：如果您想记住它，请使用loadeventListener on<body>然后执行所有这些代码。而不是window.addEventListener("load", init);使用body.addEventListener("load", init).
0

跃然一笑

Saurav Pathak 是正确的，内联 JS 的预期格式应该是这样的：<head><script>&nbsp; &nbsp; &nbsp;// Some standard JS in here&nbsp;&nbsp; &nbsp; &nbsp;// For readability I would but the event listeners at the end&nbsp; &nbsp; &nbsp;function validation(){&nbsp; &nbsp; &nbsp; &nbsp; var userNme = document.getElementById("username").value;&nbsp; &nbsp; &nbsp; &nbsp; var pass = document.getElementById("password").value;&nbsp; &nbsp; &nbsp; &nbsp; var id = document.getElementById("student-id").value;&nbsp; &nbsp; &nbsp; &nbsp; var success = false;&nbsp; &nbsp; &nbsp; &nbsp; var words = /^[A-Za-z]+$/;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if(userNme.match(words)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName("one").setAttribute("class", "hidden");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success = true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName("one").setAttribute("class", "visible");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if(pass.match(/[a-z]/) && pass.match(/[A-Z]/) && pass.match(/[0-9]/)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName("two").setAttribute("class", "hidden");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success = true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName("two").setAttribute("class", "visible");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if(id.length == 9){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName("three").setAttribute("class", "hidden");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success = true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName("three").setAttribute("class", "visible");&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; function init(){&nbsp; &nbsp; &nbsp; &nbsp; var start = document.getElementById("go");&nbsp; &nbsp; &nbsp; &nbsp; start.addEventListener("click", validation);&nbsp; &nbsp; }&nbsp; &nbsp; window.addEventListener("load", init);</script></head>您也可以将所有 JS 放在一个单独的文件中，加载方式如下： <script src='/path/to/app.js'></script>最后要注意的是，有时您希望在使用 JS 获取标签之前呈现页面的其余部分。很多时候你会把依赖于要呈现的 HTML 元素的 JS 放在 HTML 文件的底部（比如在<footer>标签中）。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答