使用外部JS显示隐藏信息

Displaying Hidden Information using external JS

本文关键字：显示隐藏信息 JS 外部      更新时间：2023-09-26

我正在做的是验证用户输入。此时，我只是验证名称，以确保名称至少有6个字符长。我将添加更多的验证，但我甚至无法为此显示错误。如果脚本在HTML页面上，它确实有效，但我希望它在外部，因为我有很多需要添加的内容。

当我在HTML页面上的标签之间有js时，它就工作了：如果输入的字符少于6个，它就会显示被CSS隐藏的"txtNameError"。

当我在external.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文件。

我会重新定位/重做这个变量，所以希望我不会有这个问题！

非常感谢大家的帮助！：）

您在脚本中拼写的函数不正确。

也在你的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/

相关文章：