如果密码不正确，我无法在文本框下方创建元素
以下代码存在问题：我尝试在 javascript 中创建一个元素，但每次执行单击时该元素都会出现和消失。
function hi() {
let user = document.getElementById('username').value;
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
let cpassword = document.getElementById('cspassword').value;
if (user == "" || email == "" || password == "" || cpassword == "") {
alert('no field can be left empty')
} else if (password != cpassword) {
let par = document.createElement('p');
let text = document.createTextNode('passwords do not match');
par.appendChild(text);
document.querySelector('form').appendChild(par);
} else {
alert('welcome');
}
}
<!DOCTYPE html>
<html>
<head>
<title>forms</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="ie=edge">
</head>
<body>
<form class="myform">
<input type="text" placeholder="username" id="username" name="">
<input type="email" placeholder="Email" id="email" name="email">
<input type="password" placeholder="password" id="password" name="password">
<input type="password" placeholder="cpassword" id="cspassword" name="cpassword">
<button onclick="hi();">submit</button>
</form>
<script src="forms.js"></script>
</body>
</html>
如果密码不正确，预期的行为应该是创建一个段落。
小唯快跑啊3回答
-
繁星coding
function hi(event) { let user = document.getElementById('username').value; let email = document.getElementById('email').value; let password = document.getElementById('password').value; let cpassword = document.getElementById('cspassword').value; if (user == "" || email == "" || password == "" || cpassword == "") { alert('no field can be left empty') } else if (password != cpassword) { let par = document.createElement('p'); let text = document.createTextNode('passwords do not match'); par.appendChild(text); document.querySelector('form').appendChild(par); event.preventDefault(); // This will prevent page get refresh... } else { alert('welcome'); }}<!DOCTYPE html><html><head> <title>forms</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-compatible" content="ie=edge"></head><body> <form class="myform"> <input type="text" placeholder="username" id="username" name=""> <input type="email" placeholder="Email" id="email" name="email"> <input type="password" placeholder="password" id="password" name="password"> <input type="password" placeholder="cpassword" id="cspassword" name="cpassword"> <button onclick="hi(event);">submit</button> </form> <script src="forms.js"></script></body></html> -
MMTTMM
代替button标签使用<input type="button" onclick="hi();" value="submit"/>请参阅按钮与输入类型按钮function hi(){let user = document.getElementById('username').value;let email = document.getElementById('email').value;let password = document.getElementById('password').value;let cpassword = document.getElementById('cspassword').value;if(user == "" || email == "" || password == "" || cpassword == "" ){ alert('no field can be left empty')}else if(password != cpassword){ let par = document.createElement('p'); let text = document.createTextNode('passwords do not match'); par.appendChild(text); document.querySelector('form').appendChild(par);}else { alert('welcome');}}<form class="myform"> <input type="text" placeholder="username" id="username" name=""> <input type="email" placeholder="Email" id="email" name="email"> <input type="password" placeholder="password" id="password" name="password"> <input type="password" placeholder="cpassword" id="cspassword" name="cpassword"> <input type="button" onclick="hi();" value="submit"/> </form>
随时随地看视频慕课网APP
相关分类
JavaScript