英文:
JS get form data into array foreach loop for array getting values as undefined
问题
我从一个表单中获取值,然后运行一个循环来检查它们是否为空。如果为空,我将缺少信息的文本框设为红色,否则设为绿色。然而,当我将我的值放入循环中时,它们变成了未定义值。我已经检查了填写表单后数组中的值,它们是存在的。有人知道为什么会发生这种情况。
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";
}
});
})
这样的样式是有效的,只是值不对。谢谢!
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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";
}
});
})
<!-- end snippet -->
The style works its just the values that don't.
Thanks!
答案1
得分: 1
根据文本的索引选择,而不是遍历所有元素。
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;
});
英文:
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;
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论