hey guys I don't know why I am getting the error Cannot read properties of null (reading 'addEventListener') when it is connected properly. It is super frustrating here is my code any help would be apprecaited
javascript
const formControl = document.getElementById('contact');
const mail = document.getElementById('email');
const errors = document.querySelector('error-messages');
formControl.addEventListener('submit', (e) => {
if (mail.value === mail.value.toLowerCase()) {
errors.textContent = '';
} else {
e.preventDefault();
errors.innerHTML = 'the email must be in lowercase letters <br> form not sent';
}
});
HTML
<section id="contactpage" class="form-section">
<div class="form-container">
<form action="https://formspree.io/f/myyvzkag" method="post" id="contact">
<ul class="form-info">
<li>
<input
type="text"
maxlength="30"
name="user_name"
class="name-text-box"
id="full-name"
placeholder="Full Name"
required=""
/>
</li>
<li>
<input
type="email"
name="user_email"
class="name-last-text-box"
id="email"
placeholder="Email Address"
required=""
/>
</li>
<li>
<textarea
id="text-box"
name="message"
maxlength="500"
class="enter-form"
cols="30"
rows="10"
placeholder="Enter text here"
required=""
></textarea>
</li>
</ul>
</form>
<input type="submit" value="Get in touch" class="send-btn" />
<small class="error-messages"></small>
</div>
I have tried everything I know to fix this error but maybe someone might know how to fix this problem