title: querySelectorAll detecting value in input
body: <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>