How can I change this input's value when a button is clicked?
<p>I'm trying to write a program which has several textboxes and 1 button.  When the user clicks the button the value for the  textboxes changes to <code>how are you</code>.</p>

<p>I'm not sure how to  refer to the value  <code>i</code> for the expression <code>document.getElementById('text'+i).value= 'how are you'</code></p>

<pre><code> &lt;input name="text1" type="text" id="text1" value="textbox 1"                 
 onFocus="this.style.background ='yellow'" onBlur="this.style.background='white'"&gt;
 &lt;input name="text2" type="text" id="text2" value="textbox 2"                             
 onFocus="this.style.background = 'yellow'" onBlur="this.style.background='white'"&gt;
</code></pre>



<pre><code>function popup() {
    for( int i; i &lt;2, i++) {      
      document.getElementById('text'+i).value= 'how are you'      
    }
}  
</code></pre>



<pre><code>&lt;input type="button" value="Click Me!" onclick="popup()"&gt;&lt;br /&gt;
</code></pre>

<p>I have changed the for loop part, but its still not quite working:</p>

<pre><code>function popup() {
    for( var i = 1, i &lt;= 2, i++) {
      document.getElementById('text'+i).value= 'how are you'
    }
}
</code></pre>

<p>Would the program work with a foreach loop like in C++ ?  First it will count the number of textboxes you have and then create a list which goes from 1 
to the total number of textboxe, then write a for loop to count the textboxes.</p>
