我有一个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
如果有人能帮忙,我将不胜感激。
发布于 2018-08-29 08:09:35
您的相对文件路径似乎不正确,请使用以"../“开头的路径向后移动到一个目录,并从那里开始,或使用"../../”向后移动到两个目录。详情可以在here上找到。
根据位于html文件上两层的app.js的位置,您的代码应该是:
<script src='../../app.js' type='text/javascript'></script>
发布于 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
复制相似问题