上的点击结果出现，然后自动刷新

Question

document.querySelector('.login').addEventListener('click', function() {
const check = document.querySelector('.username').value;
console.log(typeof check);
if (!check) {
document.querySelector('.errorMessage').textContent =
'kindly enter your username';
}
});

<div class="user-login">
<form>
<label for="">User Name :  <input type="text" name="userName" class=" username"></label> <br>
<label for="">Password:  <input type="password" name="" class="password"></label> <br>
<button class="login">Login</button>
</form>
</div>
<div class="errorMessage">
<label for=""></label> <br>
</div>

Answer 1

在你的html中这样修改按钮:

<button type="button" class="login">Login</button>

或者在你的javascript中你可以这样做:

document.querySelector('.login').addEventListener('click', function(e) {
e.preventDefault(); // Add this after set 'e' as parameter
const check = document.querySelector('.username').value;
console.log(typeof check);
if (!check) {
document.querySelector('.errorMessage').textContent =
'kindly enter your username';
}
});