JS get form data into array foreach loop for array getting values as undefined

Question

I am getting values from a form and am running a for each loop to see if they are empty. if they are I make the textbox with missing information red and green if not. However, when I put my values throw for each loop. it gets undefined values. I have checked the values in the array after filling the form and they are there. Anyone knows why this happens.

let Ac = document.forms["formtest"]["Accession"].value;
let ItName = document.forms["formtest"]["ItemName"].value;
let date = document.forms["formtest"]["date"].value;
let ItType = document.forms["formtest"]["ItemType"].value;
let ItCon = document.forms["formtest"]["ItemCondition"].value;
let ItDon = document.forms["formtest"]["Donation"].value;
let ConFN = document.forms["formtest"]["FirstName"].value;
let ConLN = document.forms["formtest"]["LastName"].value;
let ConOrg = document.forms["formtest"]["Org"].value;
let Room = document.forms["formtest"]["Room#"].value;
let Shelf = document.forms["formtest"]["Shelf#"].value;
let Row = document.forms["formtest"]["Row#"].value;
let Acerror = document.getElementById("Acerror");
let ItNameerror = document.getElementById("ItemNameerror");
let dateerror = document.getElementById("date");
let ItTypeerror = document.getElementById("ItemTypeerror");
let ItConerror = document.getElementById("ItemConditionerror");
let ItDonerror = document.getElementById("Donationerror");
let Roomerror = document.getElementById("Roomerror");
let Shelferror = document.getElementById("Shelferror");
let Rowerror = document.getElementById("Rowerror");
let ConFNerror = document.getElementById("FirstNameerror");
let ConLNerror = document.getElementById("LastNameerror");
let ConOrgerror = document.getElementById("OrgNameerror");
alert(Ac + ItName + date + ItCon + ItType + Room + Shelf + Row + ItDon);
const Errorstyles = [Acerror, ItNameerror, dateerror, ItTypeerror, ItConerror, Roomerror, Shelferror, Rowerror, ItDonerror];
const blanktext = [Ac, ItName, date, ItCon, ItType, Room,
  Shelf, Row, ItDon
];
alert(blanktext);
blanktext.forEach((i) => {
  Errorstyles.forEach((Style) => {
    if (i == "") {
      Style.style.borderColor = "red";
    } else {
      Style.style.borderColor = "green";
    }
  });
})

The style works its just the values that don't. Thanks!

Answer 1

You need to select based on the index of the text, not loop over all of the elements.

const errorElems = [Acerror, ItNameerror, dateerror, ItTypeerror, ItConerror, Roomerror, Shelferror, Rowerror, ItDonerror];
const textValues = [Ac, ItName, date, ItCon, ItType, Room, Shelf, Row, ItDon];

textValues.forEach((text, index) => {
  // errorElems[index].classList.toggle('error', text.length === 0);
  const color = text.length === 0 ? 'red' : 'green';
  errorElems[index].style.borderColor = color;
});