使用外部 JS 显示隐藏信息

Question

我正在做的是验证用户输入。目前，我只是验证名称以确保名称至少有 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 中时，我不包含脚本标签。

Answer 1

我想通了！

我从 HTML 页面中提取的其他变量之一是在页面完全加载之前尝试从页面中提取。我使用外部 .js 文件删除了它并且它可以工作。

我将致力于重新定位/重做该变量，所以希望我不会遇到这个问题！

非常感谢大家的帮助！ :)

Answer 2

您在脚本中拼写错误的函数。

同样在你的 html 中删除 ;在 onclick 属性中。似乎已经为我清理了错误。

 function validateForm() {
        var name = document.getElementById('txtName').value;
        var nameLength = name.length;
        if (nameLength < 6) {
            document.getElementById("txtNameError").style.visibility = "visible";
        }
    }

和

<td><button onclick="validateForm();">Register</button></td>

应该是<td><button onclick="validateForm()">Register</button></td>

此外，我使用 jQuery 重新编写了设置，以便更轻松地检查 html 元素，但是如果您需要它们在 javascript 中，我可以考虑重新编写它，在这里查看我更新的 jsfiddle：http://jsfiddle.net/dhershman/365r5tg5/1/