从HTML中的单独Javascript文件调用函数不起作用
我有一个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“文件夹中。
项目路径:/Users/.../app.js/app.js
html文件路径: /Users/.../Project/views/index.html
如果有人能帮忙，我将不胜感激。
回答 2
Stack Overflow用户
发布于 2018-08-29 08:09:35
您的相对文件路径似乎不正确，请使用以"../“开头的路径向后移动到一个目录，并从那里开始，或使用"../../”向后移动到两个目录。详情可以在here上找到。
根据位于html文件上两层的app.js的位置，您的代码应该是：
<script src='../../app.js' type='text/javascript'></script>Stack Overflow用户
发布于 2018-08-29 08:14:41
所以上面的代码有多处错误...
您不需要通过整个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";
}
})https://stackoverflow.com/questions/52067444
复制相似问题
腾讯云开发者
