英文:
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;});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论