HTML Javascript changing content of table cell
<p>I want to change the content of the cell in the table by pressing the button, without using input textbox. 
What should I use to do it?
Thanks!</p>

<p>Here's my code:</p>

<p>`</p>

<pre><code>var images = new Array();
var i=0;

images[0] ="1.jpg";
images[1] ="2.jpg";
images[2] ="3.jpg";
images[3] ="4.jpg";

names = ["New York", "Nagasaki", "Nottingham", "Netherlands"]

function next(){
    if(i&gt;=images.length){
        i=0;
        document.getElementById('names').value=names[i];
        document.getElementById('img').src=images[i];   
        i++;
    }
    else{
        document.getElementById('img').src=images[i];
        document.getElementById('names').value=names[i];
        i++;
    }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;&lt;center&gt;
&lt;h3&gt;LabExercise3&lt;/h3&gt;
&lt;h2&gt;By &lt;i&gt;&lt;b&gt;&lt;u&gt;Nurbek Zhapar&lt;/u&gt;&lt;/b&gt;&lt;/i&gt;&lt;/h2&gt;&lt;/center&gt;
&lt;form&gt;
&lt;h1&gt;Around the World&lt;/h1&gt;&lt;br/&gt;
&lt;hr/&gt;
&lt;br/&gt;
    &lt;table align="center"&gt;
        &lt;tr&gt;&lt;td&gt;&lt;input type="text" value="" id="names" readonly="readonly"/&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;&lt;p style="text-align:center;"&gt;
            &lt;img src="1.jpg" alt=""  id="img"/&gt;
            &lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

&lt;table align="center"&gt;
  &lt;tr&gt;
       &lt;td&gt;&lt;input type="button" value=" Next " onclick="next()" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;        
&lt;/form&gt;`
</code></pre>

<p>I want to replace input textbox that I used here to display Country names by something else, or show Country names in other way. Thanks!  </p>
