html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1> Welcome to Benjamin's bank. Have some Money</h1>
<p>Please enter your name, password and the amount you want to withdraw</p>
<form action="" method="post">
<input type="text" value="name" id="name"><br>
<input type="password" value="password" id="password"><br>
<input type="text" value="amount" id="amount"><br>
<button onclick="withdraw()">click me</button>
</form>
<p id="para"></p>
<script src="Beginners_bank.js" async defer></script>
</body>
</html>
Javascript
function withdraw(){
var namevar= document.getElementById("name").value;
var passwordvar=document.getElementById("password").value;
var amountvar=document.getElementById("amount").value;
var Amount=3000;
var name="Benjamin Anoruo";
var pass="testing123";
var n=Amount-amountvar;
if(namevar==name && passwordvar==pass ){
if(amountvar<=Amount){
document.getElementById("para").innerHTML="your withdrawal was successful. your new balance is:" n;
document.body.style.backgroundColor='green';
}
}
}
此代碼應該使用用戶名密碼和他們想要提取的金額。任何時候我輸入每個詳細資訊并單擊按鈕它只會閃爍輸出并回傳一個空表格 請問我該如何解決這個問題。
uj5u.com熱心網友回復：
只需將 type="button" 添加到您的按鈕
uj5u.com熱心網友回復：
就像@Hyperella 指出的那樣，按 Enter 會導致頁面重繪 ，這就是導致閃光的原因。為了防止那樣做，就像他所展示的那樣。
uj5u.com熱心網友回復：
表單內的任何按鈕單擊都會進行表單提交。你可以通過這樣做來防止<button onclick="event.preventDefault(); withdraw();">click me</button>
這種情況。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1> Welcome to Benjamin's bank. Have some Money</h1>
<p>Please enter your name, password and the amount you want to withdraw</p>
<form action="" method="post">
<input type="text" value="name" id="name"><br>
<input type="password" value="password" id="password"><br>
<input type="text" value="amount" id="amount"><br>
<button onclick="event.preventDefault(); withdraw();">click me</button>
</form>
<p id="para"></p>
<script>
function withdraw() {
alert('Function called without form submission');
}
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358475.html
標籤：javascript html