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>
holdtom2回答
-
慕村225694
这是因为如果<script>在<head>. 当您希望 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). -
跃然一笑
Saurav Pathak 是正确的，内联 JS 的预期格式应该是这样的：<head><script> // Some standard JS in here // For readability I would but the event listeners at the end 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); } window.addEventListener("load", init);</script></head>您也可以将所有 JS 放在一个单独的文件中，加载方式如下： <script src='/path/to/app.js'></script>最后要注意的是，有时您希望在使用 JS 获取标签之前呈现页面的其余部分。很多时候你会把依赖于要呈现的 HTML 元素的 JS 放在 HTML 文件的底部（比如在<footer>标签中）。
随时随地看视频慕课网APP
相关分类
JavaScript