以下代码存在问题：我尝试在 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
TA贡献1797条经验 获得超4个赞
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
TA贡献1869条经验 获得超4个赞
代替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>
添加回答
举报
0/150
提交
取消