querySelectorAll detecting value in input

Question

I have multiple inputs I want to discriminate according to whether the user enters a value in it or not.

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

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

The code I wrote only works with attribute values, instead of detecting "manually" typed values before launching the function :

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";

  }
}

I only want to detect the inputs in which the user typed something when he submits it through the highlight button. Is there a way to do it in pure javascript ?

Here is my fiddle : https://jsfiddle.net/Lau1989/Lytwyn8s/

Thanks for your help

Answer 1

You need to check value like this

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>

See also JsFiddle link

And if you want to remove lime background when user fills input and clicks again you can add else statement.

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>

UPDATE

You need that

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>

Answer 2

It's not possible to select empty inputs using CSS selectors (see Matching an empty input box using CSS), but you can achieve what you want by testing the length of the value before applying the style:

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";
    }
  }
}