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

【问题标题】：Call a function from a separate Javascript file from HTML isn't working从 HTML 中调用单独的 Javascript 文件中的函数不起作用
【发布时间】：2018-08-28 23:25:01
【问题描述】：

我有一个 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 的整个路径，所以我不知道为什么它没有被调用。 app.js 文件比 html 文件高一个目录，因为我将 html 文件放在“views”文件夹中。

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

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

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

【问题讨论】：

您是否在浏览器的 JavaScript 控制台中看到错误消息？
另外，您的 checkName() 函数中存在语法错误。 else 语句中没有右括号
亚当是对的。使用合适的编辑器，这样你就不会犯像缺少大括号这样的愚蠢错误
您使用的是哪个编辑器？您至少有两个语法错误...
抱歉，实际文件中没有语法错误。编辑stackoverflow帖子时一定忘记了一些括号。此外，控制台中没有错误消息。我什至在函数内部放了一个 try catch 以查看是否有错误，但似乎它甚至没有命中函数

标签： javascript html json node.js

【解决方案1】：

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

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

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

【讨论】：

我已尝试按照您的建议进行操作，但该功能似乎仍未执行。如果您返回两个目录 (../../)，那么由于您从包含 index.html 的目录（视图目录）开始，您不会最终进入作为 Project 的父目录的目录吗？我也试过做 ../app.js 也没有用

【解决方案2】：

所以上面有很多问题......

您无需通过整个 UNIX 路径指定脚本，而只是从 Web 根目录开始，因此无论 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";
    }
})

【讨论】：