title: How do I input variables to change label text using javascript
body: <p>I am trying to make it so that when the user inputs a names into the inputbox and then clicks the 'Enter Candidates' button, it will then change the name of the labels below. Is there a way to do this in javascript? i have just started coding so i am a bit of a newbie.</p>
  
  <pre><code>            &lt;form class="simple-form"&gt;
                  &lt;div&gt;Enter your candidate &lt;b&gt;names&lt;/b&gt; in the boxes below:&lt;/div&gt;
                  &lt;br/&gt;
                  &lt;label for="C1"&gt;Candidate 1:&lt;/label&gt;
                  &lt;input type="text" name="C1" id="C1" class="InputBox" /&gt;
                  &lt;br/&gt;
                  &lt;label for="C2"&gt;Candidate 2:&lt;/label&gt;
                  &lt;input type="text" name="C2" id="C2" class="InputBox" /&gt;
                  &lt;br/&gt;
                  &lt;label for="C3"&gt;Candidate 3:&lt;/label&gt;
                  &lt;input type="text" name="C3" id="C3" class="InputBox" /&gt;
                  &lt;br/&gt;
                  &lt;label for="C4"&gt;Candidate 4:&lt;/label&gt;
                  &lt;input type="text" name="C4" id="C4" class="InputBox" /&gt;
                  &lt;br/&gt;
                  &lt;label for="C5"&gt;Candidate 5:&lt;/label&gt;
                  &lt;input type="text" name="C5" id="C5" class="InputBox" /&gt;
                  &lt;br/&gt;
                  &lt;input type="button" OnClick="EnterCandidates" value="Enter Candidates" /&gt;
                  &lt;br/&gt;
  
                  &lt;br/&gt;
                  &lt;div&gt;Enter the candidates &lt;b&gt;votes&lt;/b&gt; in the boxes below:&lt;/div&gt;
                  &lt;br/&gt;
                  &lt;label for="V1" id="L_V1"&gt;Name 1:&lt;/label&gt;
                  &lt;input type="text" name="V1" id="I_V1" class="InputBox" /&gt;
                  &lt;br/&gt;
                  &lt;label for="V2" id="L_V2"&gt;Name 2:&lt;/label&gt;
                  &lt;input type="text" name="V2" id="I_V2" class="InputBox" /&gt;
                  &lt;br/&gt;
                  &lt;label for="V3" id="L_V3"&gt;Name 3:&lt;/label&gt;
                  &lt;input type="text" name="V3" id="I_V3" class="InputBox" /&gt;
                  &lt;br/&gt;
                  &lt;label for="V4" id="L_V4"&gt;Name 4:&lt;/label&gt;
                  &lt;input type="text" name="V4" id="I_V4" class="InputBox" /&gt;
                  &lt;br/&gt;
                  &lt;label for="V5" id="L_V5"&gt;Name 5:&lt;/label&gt;
                  &lt;input type="text" name="V5" id="I_V5" class="InputBox" /&gt;
                  &lt;br/&gt;
                  &lt;input type="button" OnClick="" value="Enter Votes" /&gt;
                  &lt;br/&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>Thanks everyone who helped me. 
  One more question.
  I have decided to use this code (thanks @David Thomas):</p>
  
  <pre><code>function EnterCandidates() {
    var candidateNameInputs = document.querySelectorAll('input[id^=C]'),
      names = document.querySelectorAll('label[for^=V][id^=L_V]');
  
    Array.prototype.forEach.call(names, function(label, index) {
      if (candidateNameInputs[index].value !== candidateNameInputs[index].defaultValue) {
        label.textContent = candidateNameInputs[index].value;
      }
    });
  }
  </code></pre>
  
  <p>How do i add a verification so that the user can only use string and it has a certain character limit like 20 characters?
  I tried to add one of your guys suggestions to it but i guess i did it wrong because it did not work.  </p>