querySelectorAll detecting value in input
<p>I have multiple inputs I want to discriminate according to whether the user enters a value in it or not.</p>

<pre><code>&lt;input type="text" class="foo"&gt; &lt;br/&gt;
&lt;input type="text" class="foo" value = "D"&gt; &lt;br/&gt;
//and so on.. 

&lt;button onclick="calculate()"&gt;Hightlight&lt;/button&gt;
</code></pre>

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

<pre><code>function calculate() {

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

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

  }
}
</code></pre>

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

<p>Here is my fiddle : <a href="https://jsfiddle.net/Lau1989/Lytwyn8s/" rel="nofollow">https://jsfiddle.net/Lau1989/Lytwyn8s/</a></p>

<p>Thanks for your help </p>