Why the paragraphs arent showing up when inputs are empty

im pretty new to coding and i wanted to try to make a register form and use javascript to check if any of the forms are empty. I tried to make it using DOM but it seems that its not working. If anyone can help me i will be really thankful.

js code:

let btnCheck = document.querySelector('#claim');
let input = document.querySelectorAll('input');
let fname = document.querySelector('#fname');
let lname = document.querySelector('#lname');
let email = document.querySelector('#email');
let password = document.querySelector('#password');


function checkForBlank(){
if (document.querySelector('#fname').value == ""){
    fname.innerHTML = 'First Name cannot be empty'
}
if (document.querySelector('#lname').value == ""){
    lname.innerHTML = 'Last Name cannot be empty'
}
if (document.querySelector('#email').value == ""){
    email.innerHTML = "Looks like this is not an email"
}
if (document.querySelector('#password').value ==""){
    password.innerHTML = 'Password cannot be empty'
}
}


btnCheck.addEventListener('click', checkForBlank());

html code:

  <form>
<input type='text' placeholder="First Name">
<p id='fname'></p>
<input type='text' placeholder="Last Name">
<p id='lname'></p>
<input type='text' placeholder="Email Address">
<p id='email'></p>
<input type='password' placeholder="Password">
<p id='password'></p>
</form>

Answer

Your code does not check to see if the form input field is empty currently. You would want to get reference to the input and check to see if that is empty.

<form>
    <input id="fname-input" type="text" placeholder="First Name" />
    <p id="fname"></p>
    <input id="lname-input" type="text" placeholder="Last Name" />
    <p id="lname"></p>
    <input id="email-input" type="text" placeholder="Email Address" />
    <p id="email"></p>
    <input id="password-input" type="password" placeholder="Password" />
    <p id="password"></p>
</form>
const btnCheck = document.querySelector('#claim');
const fname = document.querySelector('#fname');
const fnameInput = document.querySelector('#fname-input');
const lname = document.querySelector('#lname');
const lnameInput = document.querySelector('#lname-input');
const email = document.querySelector('#email');
const emailInput = document.querySelector('#email-input');
const password = document.querySelector('#password');
const passwordInput = document.querySelector('#password-input');

function checkForBlank() {
    if (fnameInput.value == "") {
        fname.innerHTML = "First Name cannot be empty";
    }
    if (lnameInput.value == "") {
        lname.innerHTML = "Last Name cannot be empty";
    }
    if (emailInput.value == "") {
        email.innerHTML = "Looks like this is not an email";
    }
    if (passwordInput.value == "") {
        password.innerHTML = "Password cannot be empty";
    }
}

btnCheck.addEventListener('click', checkForBlank);

Additionally, you need to pass a function reference to addEventListener instead of invoking the function.

btnCheck.addEventListener('click', checkForBlank()); // WRONG

btnCheck.addEventListener('click', checkForBlank); //RIGHT

Note: I would recommend to rather (or additionally) use the required property of html elements https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required