How to display images one at a time through loop with HTML/Javascript?

Question

I'm not one of those people that grew up with programming, or have experienced in high school. I just recently started the basics in College. What I have below is my javascript/html that I have been working on Visual Studio 2012. My goal for it is to display the images one at a time by pressing a button called "Next Name" (as you can see I created a "form" at the bottom of my code). But as I have it now, it prints out all the images in my "hw1.txt" at the same time. Under my for loop, I tried "result = "";" and then "displayList.innerHTML = result;" hoping to just print out one image at least. I tried other things, but it just left my code messy. Please I need help. Any advice, pointers, or whatever is good. Can you also explain your answers in a way that I'll understand too? Just think of me as you're talking to a child or something haha. Thanks.

Note: in "hw1.txt" every 3rd index (starting from index 0) is the name of people, and the index next to it (myArray[i + 1]) is the image file (inside the .txt it goes like 1.jpg, 2.jpg, 3.jpg, and so on...)

<br/>
<span id="displayList">Photo here.</span>

<script type=text/javascript>
    if (typeof ActiveXObject != "undefined")                             // IE
        var req = new ActiveXObject("Microsoft.XMLHTTP");
    else                                                                             // Other browsers
        var req = new XMLHttpRequest();

    req.open('GET', 'hw1.txt', false);
    req.send(null);
    s = req.responseText;

    var myArray = s.split(";");
    var result = "";

    function nextItem() {

        for (i = 3; i < myArray.length; i = i + 3)
            result = result + "<img src='" + myArray[i + 1] + "'/>";
        displayList.innerHTML = result;

    }

</script>

<form name="ClickNext">
    <input type="button" value="Next Name" onclick="nextItem()" />
</form>

Answer 1

<span id="displayList">Photo here.</span>

<script type=text/javascript>
    if (typeof ActiveXObject != "undefined")                             // IE
        var req = new ActiveXObject("Microsoft.XMLHTTP");
    else                                                                             // Other browsers
        var req = new XMLHttpRequest();

    req.open('GET', 'hw1.txt', false);
    req.send(null);
    s = req.responseText;

    var myArray = s.split(","); //if images are comma(,) seperated then just split it from comma
    var index = 0;

    function nextItem() {
        if(typeof myArray[index] !== 'undefined') {
            displayList.innerHTML = "<img src='" + myArray[index] + "'/>";
            index += 1;
        }
    }

</script>

<form name="ClickNext">
    <input type="button" value="Next Name" onclick="nextItem()" />
</form>

Answer 2

First off you don't need the form around that input since you don't really send a form.

Secound you should add an id to your input ( or <a></a> or <button></button> ) such as id="next_name" or I guess you can keep the old way of calling an event. :P

Then, you should:

var position = 0;
var result = '';
document.getElementById('next_name').onclick = function(){
  if(position < myArray.length){
    result = result + "<img src='" + myArray[position + 1] + "'/>";
    displayList.innerHTML = result;
    position++;
  }
};

The idea is to use a variable to memorize your position within your list of image srouces. Once you use one, you increment your position within the list so next time a user clicks that button you add a different image.