这就是我尝试过的。
如果我尝试使用onclick-inline-js，它可以工作，但我想使用事件侦听器使其工作
function fnameCheck(){
var fname = document.getElementById('fname');
if(fname=""){
alert('Please enter first name');
document.querySelector('#fname').style.backgroundColor = "red";
return false;
}
if(fname.length<=2){
alert('First name cannot be less than 2 character!');
document.querySelector('#fname').style.backgroundColor = "red";
return false;
}
}
document.getElementById('fnameBtn').addEventListener("click",fnameCheck);
它能解决您的查询吗
我刚刚添加了值属性var fname=document.getElementById('name'(.value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<input type="text" name="" id="fname">
<button id="fnameBtn">Check</button>
<script type="text/javascript">
function fnameCheck(){
var fname = document.getElementById('fname').value;
console.log(fname);
if(fname == ""){
alert('Please enter first name');
document.querySelector('#fname').style.backgroundColor = "red";
return false;
}
else if(fname.length <= 2){
console.log(fname.length);
alert('First name cannot be less than 2 character!');
document.querySelector('#fname').style.backgroundColor = "red";
return false;
}else {
alert('Fname is satisfied');
document.querySelector('#fname').style.backgroundColor = "green";
return false;
}
}
document.getElementById('fnameBtn').addEventListener("click",fnameCheck);
</script>
</body>
</html>