Question

我有一个HTML文件 index.html ，当用户在文本框中键入内容时，该文件会从文件 app.js 中调用javascript函数。基本上，目的是通过与json文件中的数据进行比较来检查用户输入是否正确。用户输入是具有IP地址的计算机用户名，因此，如果输入与用户名匹配并返回IP地址，则文本框将以绿色突出显示，以便用户知道其正确性。如果不是有效的用户名，它将以红色突出显示。

Index.html

    <script src='/Users/.../Project/app.js' type='text/javascript'></script>
    <input id="username" type="text" name="username" placeholder="User name" oninput="checkName(this.value);" required>

App.js

function checkName(name){
   var contents = fs.readFileSync("jData.json");
   var jsonContent = JSON.parse(contents);
   var x = jsonContent[name].ip_1gb;
   console.log(x);
   if ( x == '') {
      document.getElementById("username").style.boxShadow = "0 0 3px red";
   } else {
      document.getElementById("username").style.boxShadow = "0 0 3px green";
}

问题是当我在文本框中输入文本时，不会调用checkName函数。我指定了app.js的整个路径，所以我不知道为什么它没有被调用。由于我将html文件放在“视图”文件夹中，因此app.js文件比html文件高一个目录。

app.js的路径：/Users/.../Project/app.js

html文件的路径：/ Users /.../ Project / views / index.html

如果有人可以提供帮助，将不胜感激

Answer 1

yy相对文件路径似乎不正确，请使用以“ ../”开头的路径向后一个目录并从那里开始，或使用“ ../../”的路径向后移动两个目录。可以在here中找到详细信息。

根据位于html文件上方两层的app.js的位置，您的代码应为：

 <script src='../../app.js' type='text/javascript'></script>

Answer 2

因此上述内容有很多问题...

您无需通过整个UNIX路径（仅从Web根目录）指定脚本，因此无论Web根目录是什么。我假设您的网络根目录是/Project，所以只需指定它即可。

您的checkName（）函数的else语句上没有右括号。这样看来，您的代码应如下所示：

function checkName(name){
   var contents = fs.readFileSync("jData.json");
   var jsonContent = JSON.parse(contents);
   var x = jsonContent[name].ip_1gb;
   console.log(x);
   if ( x == '') {
      document.getElementById("username").style.boxShadow = "0 0 3px red";
   } else {
      document.getElementById("username").style.boxShadow = "0 0 3px green";
    }
}

但是，作为更好的实践，您应该在输入中添加一个事件侦听器，并以这种方式调用它，而不是oninput。像这样（在您的App.js文件中）：

var usernameField = document.querySelector("input[name=username]");

usernameField.addEventListener("input", function() {
   var contents = fs.readFileSync("jData.json");
   var jsonContent = JSON.parse(contents);
   var x = jsonContent[name].ip_1gb;
   console.log(x);
   if ( x == '') {
      document.getElementById("username").style.boxShadow = "0 0 3px red";
   } else {
      document.getElementById("username").style.boxShadow = "0 0 3px green";
    }
})

从HTML单独的Javascript文件中调用函数不起作用

2 个答案: