querySelectorAll обнаружение значения на входе

Question

У меня есть несколько входов, которые я хочу различить в зависимости от того, вводит ли пользователь значение или нет.

<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?

Вот моя скрипка: https://jsfiddle.net/Lau1989/Lytwyn8s/

Спасибо за вашу помощь

Answer 1

Невозможно выбрать пустые входные данные с помощью селекторов CSS (см. Сопоставление пустого поля ввода с использованием 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";
    }
  }
}

Answer 2

Вы должны проверить значение, как это

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

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

<input type="text" class="foo">
<br/>
<input type="text" class="foo" value="D">
<br/>
<input type="text" class="foo" value="G">

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

<br/>
<br/>
<div id="output"></div>

Смотрите также ссылку JsFiddle

И если вы хотите удалить фоновый лайм, когда пользователь заполняет ввод и нажимает снова, вы можете добавить else заявление.

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;
  for (var i = 0; i < myLength; ++i) {
    if (allinputs[i].value == '') {
      allinputs[i].style.backgroundColor = "lime";
    }else {
     allinputs[i].style.backgroundColor = "white";
        //allinputs[i].removeAttribute("style") or that
    }
  }
}

<input type="text" class="foo">
<br/>
<input type="text" class="foo" value="D">
<br/>
<input type="text" class="foo" value="G">

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

<br/>
<br/>
<div id="output"></div>

ОБНОВИТЬ

Тебе это нужно

function calculate() {
  var allinputs = document.querySelectorAll('input[type="text"]');
  var myLength = allinputs.length;
  for (var i = 0; i < myLength; ++i) {
    if (!allinputs[i].hasAttribute("value")) {
        if(allinputs[i].value !== '') {
       allinputs[i].style.backgroundColor = "lime";
      }else {
        allinputs[i].removeAttribute("style");
      }
    }
  }
}

<input type="text" class="foo">
<br/>
<input type="text" class="foo" value="D">
<br/>
<input type="text" class="foo" value="G">

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

<br/>
<br/>
<div id="output"></div>