JS将表单数据获取到数组中,使用foreach循环遍历数组获取的值为undefined。

huangapple go评论71阅读模式
英文:

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[&quot;formtest&quot;][&quot;Accession&quot;].value;
let ItName = document.forms[&quot;formtest&quot;][&quot;ItemName&quot;].value;
let date = document.forms[&quot;formtest&quot;][&quot;date&quot;].value;
let ItType = document.forms[&quot;formtest&quot;][&quot;ItemType&quot;].value;
let ItCon = document.forms[&quot;formtest&quot;][&quot;ItemCondition&quot;].value;
let ItDon = document.forms[&quot;formtest&quot;][&quot;Donation&quot;].value;
let ConFN = document.forms[&quot;formtest&quot;][&quot;FirstName&quot;].value;
let ConLN = document.forms[&quot;formtest&quot;][&quot;LastName&quot;].value;
let ConOrg = document.forms[&quot;formtest&quot;][&quot;Org&quot;].value;
let Room = document.forms[&quot;formtest&quot;][&quot;Room#&quot;].value;
let Shelf = document.forms[&quot;formtest&quot;][&quot;Shelf#&quot;].value;
let Row = document.forms[&quot;formtest&quot;][&quot;Row#&quot;].value;
let Acerror = document.getElementById(&quot;Acerror&quot;);
let ItNameerror = document.getElementById(&quot;ItemNameerror&quot;);
let dateerror = document.getElementById(&quot;date&quot;);
let ItTypeerror = document.getElementById(&quot;ItemTypeerror&quot;);
let ItConerror = document.getElementById(&quot;ItemConditionerror&quot;);
let ItDonerror = document.getElementById(&quot;Donationerror&quot;);
let Roomerror = document.getElementById(&quot;Roomerror&quot;);
let Shelferror = document.getElementById(&quot;Shelferror&quot;);
let Rowerror = document.getElementById(&quot;Rowerror&quot;);
let ConFNerror = document.getElementById(&quot;FirstNameerror&quot;);
let ConLNerror = document.getElementById(&quot;LastNameerror&quot;);
let ConOrgerror = document.getElementById(&quot;OrgNameerror&quot;);
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) =&gt; {
Errorstyles.forEach((Style) =&gt; {
if (i == &quot;&quot;) {
Style.style.borderColor = &quot;red&quot;;
} else {
Style.style.borderColor = &quot;green&quot;;
}
});
})

<!-- 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) =&gt; {
  // errorElems[index].classList.toggle(&#39;error&#39;, text.length === 0);
  const color = text.length === 0 ? &#39;red&#39; : &#39;green&#39;;
  errorElems[index].style.borderColor = color;
});

huangapple
  • 本文由 发表于 2023年6月29日 00:29:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76575093.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定