[英]getElementById check multiple conditions
我試圖建立一個函數,檢查是否所有字段都已填充,如果已填充,則顯示div(如果未隱藏)。
我可以使它在一個領域上工作,但是我然后嘗試了兩種檢查多重性的方法。
首先,如果滿足第一個條件,然后運行其他條件,則檢查嵌套在第一個條件內的第二個字段...這不起作用。
我第二次傳入了一個ID數組,而不是一個ID ...這也不起作用。
我剩下一個工作功能,該功能只有在填充了第一個文件時才能起作用,任何人都可以想到解決方案,或者我可能錯誤地將數組傳遞了給我。
我的密碼
var myVar = setInterval(myTimer, 10);
function myTimer() {
if(!document.getElementById('Email').value) { // I need this to pass if multiple id's
var divsToHide = document.getElementsByClassName("somediv"); //divsToHide is an array
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.visibility = "hidden"; // or
divsToHide[i].style.display = "none"; // depending on what you're doing
}
}
else {
var divsToHide = document.getElementsByClassName("somediv"); //divsToHide is an array
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.visibility = "visible"; // or
divsToHide[i].style.display = "block"; // depending on what you're doing
}
}
}
做到這一點,以便您的函數接受元素ID和需要檢查的類Name的參數。
另外,切勿使用.getElementsByClassName()
( 為什么請閱讀此處 )。 而是使用.querySelectorAll()
。
而且,您可以使用數組和節點列表的現代.forEach()
API(盡管不是在IE中),它比使用索引管理傳統的for
循環更簡單。
最后,使用預制的CSS類代替內聯樣式。
// You just need to pass the ID and Class to the following line var myVar = setInterval(function(){ myTimer([id here],[class here]) }, 10); function myTimer(id, class) { // Set up these references just once and the rest of the code // will be easier to read var elem = document.getElementById(id); var divsToHide = document.querySelectorAll("." + class); // Instead of negative logic, reverse the if branches if(elem.value) { divsToHide.forEach(function(){ this.classList.remove("hidden"); // Much simpler than inline styling }); } else { divsToHide.forEach(function(){ this.classList.add("hidden"); }); }
/* Use pre-made CSS classes instead of inline styling */ .hidden { display:none; }
如果您有ID的數組,例如
let idArray = ['foo', 'bar', 'baz']
您可以使用for
循環遍歷數組
for (i = 0; i > idArray.length; i++) {
if (!document.getElementById(idArray[i]).value) {
// your hide logic
} else {
// your show logic
}
}
您可以為所有需要驗證的元素創建一個const。 例如,
const elementIdsToBeValidated = ['name', 'email'];
您還可以創建驗證器函數,該函數根據輸入返回true和false,
const nameValidator = (val) => !!val;
const emailValidator = (email) => !!email;
const validators = [nameValidator, emailValidator];
然后,您可以運行計時器功能,
var myVar = setInterval(myTimer(['name', 'email']), 10);
function myTimer(ids) {
ids.forEach(id => {
const el = document.getElementById(id);
const val = el.value;
const divEl = document.getElementById('error');
const valid = validators.reduce((acc, validator) => validator(val), false);
if(valid) {
divEl.style.display = 'none';
} else {
divEl.style.display = 'block';
}
});
}
您可以查看以下stackBlitz示例, https: //stackblitz.com/edit/js-ie7ljf
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.