外部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.