title: set Button text programmatically
body: <p>I'm trying to set text to <code>Buttons</code> through Javascript but the value on each button just says <code>setText(letters)</code>. I want each <code>Button</code> to contain a random letter in my array <code>letters</code>. Anybody know what I need to change in my code?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script&gt;
  var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p"];
  
  function setColor(e) {
    var target = e.target,
        count = +target.dataset.count;
  
     target.style.backgroundColor = count === 1 ? "#7FFF00" : '#FFFFFF';
     target.dataset.count = count === 1 ? 0 : 1;
  }
  
  function setText(tiles){
        return tiles[Math.floor(Math.random() * tiles.length)];
  }
  
  var inputs = document.querySelectorAll('input[type=button]');
  for (var i = 0; i &lt; inputs.length; i++) {
      inputs[i].value = setText(letters);
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div&gt;
  &lt;input type="button" id="button0" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  
  &lt;input type="button" id="button1" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  &lt;input type="button" id="button2" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  
  &lt;input type="button" id="button3" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;input type="button" id="button4" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  
  &lt;input type="button" id="button5" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  &lt;input type="button" id="button6" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  
  &lt;input type="button" id="button7" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;input type="button" id="button8" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  
  &lt;input type="button" id="button9" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  &lt;input type="button" id="button10" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  
  &lt;input type="button" id="button11" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;input type="button" id="button12" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  
  &lt;input type="button" id="button13" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  &lt;input type="button" id="button14" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  
  &lt;input type="button" id="button15" value="setText(letters)" style="color:black; width:100px; height: 50px" onclick="setColor(event)"; data-count="1" /&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>