影响多个相同元素&；避免不在DOM、纯JavaScript和jQuery中时出现空错误

假设我有几个日期

输入

，我想在用户输入后更改

颜色

。使用jQuery，我可以做到：

$（'input[type=“date”]”）。在（'change'，function（）上{
var el=$（this.val（）；
如果（el==''）{
$（this.css（'color'，'#9c9c'）；
}否则{
$（this.css（'color'，'#000000'）；
}
})

输入[type=“date”]{
颜色：#9c9c9c；
}

---

我认为您的问题在于如何循环查询的元素：

对于

或者改为这样称呼：

[].forEach.call(listElements, function(element) {
    //Add event onchange
});

我把颜色改成了红色，以便更好地显示

var listElements=document.querySelectorAll（'input[type=“date”]”）；
[].forEach.call（列表元素、函数（元素）{
});
for（列表元素中的变量i）{
元素=列表元素[i]；
element.onchange=函数（）{
如果（this.value==''）{
this.style.color='red'；
}否则{
this.style.color='#000000'；
}
}
}

输入[type=“date”]{
颜色：红色；
}

---

我认为您的问题在于如何循环查询的元素：

对于

或者改为这样称呼：

[].forEach.call(listElements, function(element) {
    //Add event onchange
});

我把颜色改成了红色，以便更好地显示

var listElements=document.querySelectorAll（'input[type=“date”]”）；
[].forEach.call（列表元素、函数（元素）{
});
for（列表元素中的变量i）{
元素=列表元素[i]；
element.onchange=函数（）{
如果（this.value==''）{
this.style.color='red'；
}否则{
this.style.color='#000000'；
}
}
}

输入[type=“date”]{
颜色：红色；
}

---

使用

document.querySelectorAll

时，它总是返回一个数组。使用

forEach

循环数组中的所有项（数组可以为空，但它是空数组）。您可以使用

addEventListener

来监听更改后的事件，例如：

var inputs=document.querySelectorAll（'input[type=“date”]”）；
inputs.forEach（功能（项）{
item.addEventListener（'change'，function（）{
这个.classList.add（“红色”）；
})
})

.red{
背景：红色；
}

---

使用

document.querySelectorAll

时，它总是返回一个数组。使用

forEach

循环数组中的所有项（数组可以为空，但它是空数组）。您可以使用

addEventListener

来监听更改后的事件，例如：

var inputs=document.querySelectorAll（'input[type=“date”]”）；
inputs.forEach（功能（项）{
item.addEventListener（'change'，function（）{
这个.classList.add（“红色”）；
})
})

.red{
背景：红色；
}

在
this.onchange=function（）处
此
将是
窗口
，而不是每个元素

因此，只需将此
替换为：

document.querySelectorAll('input[type="date"]').forEach(function(element) {
   element.onchange = function() {
      if (element.value === '') {
          element.style.color = '#9c9c9c';
      } else {
          element.style.color = '#000000';
      }
  }
});

您可以从这篇文章中了解更多信息：
在
this.onchange=function（）


此
将是
窗口
，而不是每个元素

因此，只需将此
替换为：

document.querySelectorAll('input[type="date"]').forEach(function(element) {
   element.onchange = function() {
      if (element.value === '') {
          element.style.color = '#9c9c9c';
      } else {
          element.style.color = '#000000';
      }
  }
});

您可以从本文了解更多信息：
document.querySelector（'input[type=“date”]”）
为您提供了此类元素的第一个元素。您必须使用
document.querySelectorAll（'input[type=“date”]”）
并循环它返回的数组。Vanilla JS不是jQuery。@PHPglue不是
querySelectorAll
返回一个类似数组的对象（一个
NodeList
），而不是实际的
array
（因此即使在这种情况下，
forEach
也不起作用）Do
var ari=[].slice.call（document.querySelectorAll（'input[type=“date”]）
）然后考虑到
和
forEach
解决方案都起作用，为什么要使用一个而不是另一个？这里测试的问题也与
.onchange
vs
addEventListener
相同。谢谢。
document.querySelector（'input[type=“date”]”）
为您提供了第一个此类元素。您必须使用
document.querySelectorAll（'input[type=“date”]”）
并循环它返回的数组。Vanilla JS不是jQuery。@PHPglue不是
querySelectorAll
返回一个类似数组的对象（一个
NodeList
），而不是实际的
array
（因此即使在这种情况下，
forEach
也不起作用）Do
var ari=[].slice.call（document.querySelectorAll（'input[type=“date”]）
）然后考虑到
和
forEach
解决方案都起作用，为什么要使用一个而不是另一个？这里测试的问题也与
.onchange
vs
addEventListener
相同。谢谢你。有些人可能会说，蓝底红方案不符合“更好”的条件@Tibrogargan当然！但对我来说，红色比把黑色变成灰色要清晰得多，但这只是我个人的品味。有些人可能会说，蓝底红方案不符合“更好”的条件@Tibrogargan当然！但对我来说，红色比把黑色变成灰色要清晰得多，但这只是我个人的品味