我正在做的是验证用户输入。此时，我只是验证名称以确保名称至少有 6 个字符长。我将添加更多验证，但我什至无法为此显示错误。如果脚本在 HTML 页面上，它确实有效，但我希望在外部使用它，因为我需要添加很多东西。
当我在 HTML 页面上的标签之间使用 js 时，它会起作用:如果输入的字符少于 6 个，它会显示由 CSS“txtNameError”隐藏的内容。
当我将 js 放在外部 .js 文件中时，它不起作用:如果少于 6 个字符，它不会将其更改为可见。
然而，代码是相同的？
这是“名称部分”的基本 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Registration Form</title>
<link type="text/css" rel="stylesheet" href="week12.css" />
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<div class="form">
<table>
<tr>
<td><input type="text" name="txtName" id="txtName" placeholder="Name" /></td>
<td><p class="error" id="txtNameError">Name must be at least 6 characters long.</p></td>
<!--The p class "error" is set to hidden visibility using the CSS page. If they don't meet the requirements, then "txtNameError" becomes visible.-->
</tr>
<!--OTHER USER INPUT, THAT I'M NOT YET INCLUDING (just working on the name part now)-->
<tr>
<td><button onclick="validateForm();">Register</button></td>
</tr>
</table>
</div>
</body>
</html>
如果我的函数有下面的标签，它就可以工作:它使 txtNameError 可见。但是当我把我的函数放在 validate.js 上时，它根本不起作用。
<script>
function validateForm() {
var name = document.getElementById('txtName').value;
var nameLength = name.length;
if (nameLength < 6) {
document.getElementById("txtNameError").style.visibility = "visible";
}
}
</script>
当我在 HTML 页面中包含它时，我包含标签，当它在它自己的 validate.js 中时，我不包含脚本标签。
最佳答案
我想通了!
我从 HTML 页面中提取的其他变量之一是试图在页面完全加载之前从页面中提取。我删除了它并且它可以工作，使用外部 .js 文件。
我将致力于重新定位/重做该变量，希望我不会遇到这个问题!
非常感谢大家的帮助! :)
关于javascript - 使用外部 JS 显示隐藏信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26868283/