JavaScript Error?

Im not sure why the following code produces an error, when clicking on the hyperlink more than once?
Basically i create a 2-Dimen Array (5X5), then show the selected Index on load (which by default is 0) and below, i create hyperlinks to the remainding options... (see code below)

<html>
<head>
<title></title>
<script type="text/javascript">

var arr

function createArr()
{
   rows = 5;
   arr = new Array(rows)
   for (i=0;i<=(rows -1);i++)
   {
      column = 5;
      arr[i] = new Array(column)
      for (j=0;j<=(column -1);j++)
      {      
         arr[i][j] = i + "" + j
      }
   }
}

function showItem(item)
{
   count = arr[item].length
   var i=0
   for (i=0;i<=(count-1);i++)
   {
      document.write(arr[item][i] + "<br />")
   }
   document.write("----------- <br />")
   showList(item)
}

function showList(ignore)
{
   count = arr.length
   for (i=0;i<=(count -1);i++)
   {
      if (i == ignore)
      {
         document.write(arr[i][0])
      }
      else
      {
         document.write('<a href="javascript:showItem(' + i + ')">')
          document.write(arr[i][0])
          document.write('</a>')
      }
   document.write('<br />')
   }
}

createArr()
showItem(0)

</script>
</head>
<body>
</body>
</html>
SETPAsked:
Who is Participating?
 
amit_gConnect With a Mentor Commented:
Use this updated script...

<html>
<head>
<title></title>
<script type="text/javascript">

var arr

function createArr()
{
   rows = 5;
   arr = new Array(rows)
   for (i=0;i<=(rows -1);i++)
   {
      column = 5;
      arr[i] = new Array(column)
      for (j=0;j<=(column -1);j++)
      {
         arr[i][j] = i + "" + j
      }
   }
}

function showItem(item)
{
      PlaceHolderClear();
   count = arr[item].length
   var i=0
   for (i=0;i<=(count-1);i++)
   {
      PlaceHolderWrite(arr[item][i] + "<br />")
   }
   PlaceHolderWrite("----------- <br />")
   showList(item)
}

function showList(ignore)
{

   count = arr.length
   for (i=0;i<=(count -1);i++)
   {
      if (i == ignore)
      {
         PlaceHolderWrite(arr[i][0])
      }
      else
      {
         PlaceHolderWrite('<a href="#" onclick="showItem(' + i + ');return false;">' + arr[i][0] + '</a>');
      }
   PlaceHolderWrite('<br />')
   }
}

function PlaceHolderClear()
{
      document.getElementById("PlaceHolder").innerHTML = "";
}

function PlaceHolderWrite(str)
{
      document.getElementById("PlaceHolder").innerHTML += str;
}

window.onload=new Function("createArr();showItem(0);");

</script>
</head>
<body>

<div id="PlaceHolder">
</div>

</body>
</html>
0
 
gjutrasCommented:
iin your exisiting code as soon as you do a second showItem, the javascript disappears because your "page" is now all dynamically created. so the second call is trying to call a javascript function that doesn't exist anymore.
move everything except
showItem(0)
 into an external .js file
put in a script tag to include the js file.
put createArr() as the first line of the showItem() function
in the showItem() function put a writeln that also is a copy of that script include tag.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.