I've encountered an issue with my code where I have two text inputs and two date inputs. I tried to select all of them using QuerySelectorAll with a class, added a click listener that should change the textContent of a div element to "", but it's not working as expected.
Interestingly, when I try to run this logic by selecting one of the inputs with an ID, it works fine. However, it fails when I attempt to create a class that selects all four input elements. Can anyone point out what might be going wrong here?
const getSum = () => {
const inputs = ['dateInput1', 'dateInput2'];
const outputs = ['result1', 'result2'];
const arr = inputs.map(input => {
return document.getElementById(input).value;
});
if(arr.every(element => !!element)){
inputs.forEach((input, index) => {
const inputValue = document.getElementById(input).value;
if (inputValue.match(dateRegEx)) {
var sum = 0;
for (var i = 0; i < inputValue.length; i++) {
const num = parseInt(inputValue.charAt(i));
if (!isNaN(num)) {
sum += num;
}
}
const total = (sum - 1) % 9 + 1;
document.getElementById(outputs[index]).textContent = "Your number is: " + total;
}
});
} else {
document.getElementById("errorMsg").textContent = "*error* please enter two dates and two names";
}
}
const sumButton = document.querySelector(".sumNumbers");
sumButton.addEventListener("click", getSum);
const dateRegEx = /^(19|20)\d{2}-(0\d{1}|1[0-2])-([0-2]\d{1}|3[0-1])$/;
function clearErrorMsg(){
document.getElementById("errorMsg").textContent = "";
}
const cLickDeletesError = document.querySelectorAll(".clickClear");
Array.from(clickDeletesError).forEach(function(cde){
cde.addEventListener("click", clearErrorMsg);
}
const dateRegEx = /^(19|20)\d{2}-(0\d{1}|1[0-2])-([0-2]\d{1}|3[0-1])$/;
function clearErrorMsg(){
document.getElementById("errorMsg").textContent = "";
}
const cLickDeletesError = document.querySelectorAll(".clickClear");
Array.from(clickDeletesError).forEach(function(cde){
cde.addEventListener("click", clearErrorMsg);
}