Hey, I'm just diving into web development and I'm struggling to figure out why my innerHTML content isn't displaying on the page. Can anyone offer some assistance? I'm trying to display error messages if certain fields are left empty, but it's not working for some reason :/
JS:
// Email Input
const form = document.querySelector('#frmOrder');
const emailInput = form.querySelector('#inpEmail');
const emailMessage = form.querySelector('.message');
// Dropdown
const measurementSelect = form.querySelector('#selMeasure');
const measurementMessage = form.querySelector('.selMeasure .message');
// Form Validation
form.setAttribute('novalidate', 'novalidate');
form.addEventListener('submit', function (e) {
e.preventDefault();
let totalErrors = 0;
emailMessage.innerHTML = '';
measurementMessage.innerHTML = '';
if (emailInput.value == '' ) {
emailMessage.innerHTML = "Please enter your email!";
totalErrors++;
}
if (measurementSelect.value == '') {
measurementMessage.innerHTML = "Please select a measurement!";
totalErrors++
}
if (totalErrors == 0) {
form.submit();
successMessage.innerHTML = `The form has been successfully submitted`;
}
});