外部javascript文件未加载
[英]external javascript file is not loading
问题描述
我在home.html页面中包含了一个外部javascript文件“ check.js”，但似乎无法正常工作。 这是check.js的代码：
function required()
{ var empt=document.forms["form1"]["city_name"].value;
if(empt=="")
{
alert("City name is required");
return false;
}
return true;
}
而home.html的代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<p>
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
怎么了？？
5 个解决方案
解决方案1
0 2018-12-24 19:31:04
在HTML文件中使用内联脚本：
<script>
your code here
</script>
解决方案2
0 2018-12-24 19:31:53
因为处理程序的返回值确定事件是否被取消，所以您需要更改此部分：
onsubmit="required()"
与：
onsubmit="return required()"
function required(e) { var empt=document.forms["form1"]["city_name"].value; if(empt=="") { console.log("City name is required"); return false; } return true; }
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="return required()"> <h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/> <input class="input2" type="submit" name="form" value="Submit"> </form>
解决方案3
0 2018-12-24 19:32:15
这里有一些问题。 首先，您不能在<p>元素内包含<form> <p>元素，因此您的HTML应该如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<form name="form1" action="/weather" method="post" autocomplete="off" onsubmit="required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</body>
</html>
其次，您需要停止提交表单以便可以对其进行检查，但是如果可以，则需要将该表单提交到数据所在的位置。 要解决此问题，请使用提交按钮的onclick事件（而不是表单的onsubmit事件required()使required()触发。 还要添加一个e参数供以后使用：
<form name="form1" action="/weather" method="post" autocomplete="off">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit" onclick="required(e)">
</form>
您还需要input一个placeholder文本而不是一个value ，因此如果人们不触摸它，它实际上就不会被填充：
<input class="input1" type="text" name="city_name" onfocus="this.value=''" placeholder="enter city name here....">
然后使您的函数如下所示：
function required(event) {
event.preventDefault();
var empt=document.forms["form1"]["city_name"].value;
if(!empt) {
alert("City name is required");
return;
}
document["form1"].submit();
}
现在应该可以了！
解决方案4
0 2018-12-24 19:32:20
您编写的代码正在运行。 该警报永远不会显示，因为该值永远不会为空。 要解决此问题，请使用占位符属性代替输入元素中的值：
placeholder="enter city name here...."
解决方案5
0 2018-12-24 19:34:28
固定：1-使用getElementByID 2-您有一个值集，也要对其进行测试3-将return添加到onsubmit
function required() { let empt=document.getElementById("city_name").value; if(empt=="" || empt.includes("enter")) { //alert("City name is required"); return false } return true; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Weather Forecast</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" /> <script src="check.js"></script> <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" /> </head> <body> <p> <form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="return required()"> <h1>City Name:</h1><input class="input1" type="text" id="city_name" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/> <input class="input2" type="submit" name="form" value="Submit"> </form> </p> </body> </html>
Flask - 加载外部 JavaScript 文件时出现引用错误
[英]Flask - RefferenceError when loading in external JavaScript file
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.