Using a list position as a param to a function to pull certain data

function getList()
    {
        var string2 = "<img src='close.png' onclick='removeContent(3)'></img>" + "<h4>Survey Findings</h4>";
        string2 = string2 + "<p>The 15 Largest lochs in Scotland by area area...</p>";  
        document.getElementById("box3text").innerHTML = string2;


        var myList = document.getElementById("testList");


        for(i=0;i<lochName.length;i++)
        {


            if(i<3)
            {

                var listElement = "<a href='javascript:getLoch(i)'>" + "Loch "+ lochName[i] + "</a>";
                var container = document.getElementById("testList");
                var newListItem = document.createElement('li');
                newListItem.innerHTML = listElement;
                container.i开发者_StackOverflow社区nsertBefore(newListItem, container.lastChild);



            }
            else
            {

            var listElement = "Loch "+lochName[i];
            var container = document.getElementById("testList");
            var newListItem = document.createElement('li');
            newListItem.innerHTML = listElement;
            container.insertBefore(newListItem, container.lastChild);

            }

        }

    }

This function generates a list with the 1st 3 elements being hyperlinks. When clicked they should call a function call getLoch(i) with i being the position of the item in the list. However when i pass it the value it just give it a value of 15, the full size of the array and not the position.

function getLoch(Val) {

    var str = "<img src='close.png' onclick='removeContent(4)'></img>" + "<h4>Loch " + lochName[Val] +"</h4>";
    str = str + "<ul><li>Area:" + " " + area[Val] + " square miles</li>";
    str = str + "<li>Max Depth:" + " " + maxDepth[Val] + " metres deep</li>";
    str = str + "<li>County:" + " " + county[Val] + "</li></ul>";

    document.getElementById("box4").innerHTML = str;


}

There are 2 errors in your code as far as I can see. The first is the way you create your link.

var listElement = "<a href='javascript:getLoch(i)'>" + "Loch "+ lochName[i] + "</a>";

This will actually result in code like this:

<a href='javascript:getLoch(i)'>Loch name</a>

Passing a variable i is probably not what you intended, you want it to pass the value of i at the time your creating this link. This will do so:

var listElement = "<a href='javascript:getLoch(" + i + ")'>" + "Loch "+ lochName[i] + "</a>";

So why does your function get called with a value of 15, the length of your list? In your getList function, you accidently made the loop variable i a global. It's just missing a var in your loop head.

for(var i=0;i<lochName.length;i++)

After the loop finished, i has the value of the last iteration, which is your array's length minus 1. By making i a global, and having your javascript code in the links use i as parameter, getLoch got called with your array length all the time.