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>A tu html modifica el botón así:
<button type="button" class="login">Login</button>o en tu javascript puedes hacer algo como esto:
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'; } });