Don't display text inside p with Javascript file

General
1

Hi coders,
I want to insert an error text in a p tag through DOM manipulation but I can’t see the error message.
The text should appear when the user makes a mistake in writing email.
This is my file JS:

const button = document.querySelector('button');
const error = document.querySelector(".error");

button.addEventListener('click', validEmail);

function validEmail(e){
    e.preventDefault();
    const email = document.querySelector('input');
    const paragraph = document.getElementById('error-text');

    const regex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
    if(!regex.test(email.value)){
    error.style.opacity = '0';
    email.style.background= 'url(./images(icon-error.svg)';
    email.style.backgroundPosition = '70%';
    email.style.backgroundRepeat = 'no-repeat';
    email.style.border = '1px solid hsl(0, 93%, 68%)';
    paragraph.innerHTML ="Please provide a valid email";
    }
    else{
        error.style.opacity = '0';
        email.style.background = 'none';
        email.style.border = '1px solid rgb(206, 150, 150)'
    }

    email.value = '';
}

and that is the div with input + button + p:

 <div class="form">
            
               <input type="email" id="checkemail" class="text input-email center" placeholder="Email Address">
               <button name="submit" class="btn-checkemail"><img src="./images/icon-arrow.svg"></button></input>
                <p id="error-text"class="error"></p>
            </div>

Thanks for help,
CamCode

2

Why don’t you use span tag

3

Instead of using p tag I put the span tag?

4

yes , I think so.

normally for showing errors people use span tag.
p also can be used.

5

I try to use span but doesn’t work
I change variable error with document.getElementById("error-text") and I inserted inside function error.style.content =" Please provide a valid email"