我剛剛開始學習 HTML/JavaScript。我有一個表單，當提交時它應該向用戶顯示輸入資料，我已經嘗試了警報和 .html() 方法，但似乎都沒有顯示資訊。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="scripts/jquery-3.2.1.js"></script>
<script>
function displayInfo() {
let product = ($('#productName').val());
let quantity = parseInt($('#qty').val());
if ($('#delivery:checked').val() == 'y'){
let delivery = "Delivery required";
}
else{
let delivery = "Delivery not required";
}
var info = "Product name: " product "<br>" "Quantity: " quantity "<br>" "Delivery?:" delivery;
$("#info").html(info);
}
</script>
</head>
<body>
<h1>Example page</h1>
<form onsubmit="displayInfo(); return false;">
<p>Enter the name of the product you want to buy: <input type="text" id="productName"/></p>
<p>Enter the quantity you want to buy: <input type="text" id="qty" /></p>
<p>Do you require delivery? <input type="checkbox" id="delivery" value="y" /></p>
<p><input type="submit" value="Place order" /></p>
</form>
<div id ="info"></div>
</body>
</html>
并且
alert("Product name: " product "<br>" "Quantity: " quantity "<br>" "Delivery?:" delivery);
uj5u.com熱心網友回復：
您可能jQuery錯誤地設定了庫的路徑。此外，您需要delivery在與使用它相同的級別上進行宣告。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function displayInfo() {
let product = ($('#productName').val());
let quantity = parseInt($('#qty').val());
let delivery = "Delivery not required";
if ($('#delivery')[0].checked){
delivery = "Delivery required";
}
var info = "Product name: " product "<br>" "Quantity: " quantity "<br>" "Delivery?: " delivery;
$("#info").html(info);
}
</script>
</head>
<body>
<h1>Example page</h1>
<form onsubmit="displayInfo(); return false;">
<p>Enter the name of the product you want to buy: <input type="text" id="productName"/></p>
<p>Enter the quantity you want to buy: <input type="text" id="qty" /></p>
<p>Do you require delivery? <input type="checkbox" id="delivery" value="y" /></p>
<p><input type="submit" value="Place order" /></p>
</form>
<div id ="info"></div>
</body>
</html>uj5u.com熱心網友回復：
希望下面的回答能幫到你
我已經簡化了你的代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function displayInfo(e) {
e.preventDefault();
let product = ($('#productName').val());
let quantity = parseInt($('#qty').val());
let delivery = $('input#delivery:checked') ? "Delivery required" : " Delivery not required";
var info = "Product name: " product "<br>" "Quantity: " quantity "<br>" "Delivery?:" delivery;
$("#info").html(info);
alert("Product name: " product ", Quantity: " quantity ", Delivery?:" delivery);
}
</script>
</head>
<body>
<h1>Example page</h1>
<form onsubmit="displayInfo(event);">
<p>Enter the name of the product you want to buy: <input type="text" id="productName"/></p>
<p>Enter the quantity you want to buy: <input type="text" id="qty" /></p>
<p>Do you require delivery? <input type="checkbox" id="delivery" /></p>
<p><input type="submit" value="Place order" /></p>
</form>
<div id ="info"></div>
</body>
</html>uj5u.com熱心網友回復：
我在你的代碼中發現了很多問題，我改進了它。
了解 javascript 變數及其作用域，您使用 let 創建了塊作用域的變數，因此您無法訪問它。您可以使用 var 在外部宣告或優選宣告它，然后僅使用它在內部分配 if 條件。
您的 jquery 無法訪問，首先檢查您的 html 所在的腳本檔案夾中是否有 jquery 檔案。
這是改進的代碼SandBox，您應該檢查一下。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/346418.html
標籤：javascript html 查询
下一篇：重新加載后Vue3物件回傳未定義