Javascript QuerySelector输入中的所有检测值

我有多个输入，我想根据用户是否在其中输入值来区分

<input type="text" class="foo"> <br/>
<input type="text" class="foo" value = "D"> <br/>
//and so on.. 

<button onclick="calculate()">Hightlight</button>

我编写的代码仅适用于属性值，而不是在启动函数之前检测手动键入的值：

function calculate() {

  var allinputs = document.querySelectorAll('input[value][type="text"]:not([value=""])');
  var myLength = allinputs.length;

  for (var i = 0; i < myLength; ++i) {
    allinputs[i].style.backgroundColor = "lime";

  }
}

我只想检测用户通过突出显示按钮提交内容时输入的内容。 有没有一种方法可以在纯javascript中实现

这是我的小提琴：

---

感谢您的帮助

您需要像这样检查值

函数计算{ var allinputs=document.queryselectoral'input[type=text]； var myLength=所有输入长度； 对于var i=0；i您需要像这样检查值

函数计算{ var allinputs=document.queryselectoral'input[type=text]； var myLength=所有输入长度； 对于var i=0；i使用CSS选择器无法选择空输入，请参见，但您可以通过在应用样式之前测试值的长度来实现所需：

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;
  var input;

  for (var i = 0; i < myLength; ++i) {
    input = allinputs[i];
    if (input.value) {
        input.style.backgroundColor = "lime";
    }
  }
}

---

使用CSS选择器无法选择空输入，请参见，但您可以通过在应用样式之前测试值的长度来实现所需：

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;
  var input;

  for (var i = 0; i < myLength; ++i) {
    input = allinputs[i];
    if (input.value) {
        input.style.backgroundColor = "lime";
    }
  }
}

---

谢谢当我在输入中键入具有空属性值的内容时，您的解决方案有效，但当我在输入中键入不具有值属性的内容时，解决方案仍然无效。我可以为所有输入设置空白属性值，但我确信有一种更优雅的方法可以做到这一点？再次感谢您的支持help@Lauanswer updated-从QuerySelectAll中删除[value]，以便它现在可以选择所有文本输入。谢谢。当我在输入中键入具有空属性值的内容时，您的解决方案有效，但当我在输入中键入不具有值属性的内容时，解决方案仍然无效。我可以为所有输入设置空白属性值，但我确信有一种更优雅的方法可以做到这一点？再次感谢您的支持help@Lauanswer updated-从QuerySelectAll中删除[value]，以便它现在可以选择所有文本输入。+1用于您的帮助，尽管我不尝试选择空输入，但仅用于用户键入内容的无值属性的输入。+1用于您的帮助，尽管我不尝试选择空输入，但仅限于用户键入内容的无值属性的输入。