Don't display text inside p with Javascript file

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){
    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)){ = '0'; 'url(./images(icon-error.svg)'; = '70%'; = 'no-repeat'; = '1px solid hsl(0, 93%, 68%)';
    paragraph.innerHTML ="Please provide a valid email";
    else{ = '0'; = 'none'; = '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>

Thanks for help,

Why don’t you use span tag

Instead of using p tag I put the span tag?

yes , I think so.

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

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