代码不工作，我似乎无法弄清楚为什么。我必须将 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>
2 回答
慕村225694
TA贡献1880条经验 获得超4个赞
这是因为如果<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).
跃然一笑
TA贡献1826条经验 获得超6个赞
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>标签中）。
添加回答
举报
0/150
提交
取消