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

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

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

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

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

Answer 2

因此，上述情况有很多问题……

您不必仅从Web根目录就通过整个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";
    }
})