i am using a javascript where in i am creating multiple div (say 5) at runtime, using javascript function, all the divs contain some text, which is again set at runtime, now i want to disable all the divs at runtime and have the page numbers in the bottom, so that whenever user clicks on the page number only that div should get visible else other should get disable, i have created a function, which accepts parameter, as page number, i enable the div whose page number is clicked and using a for loop, i disable all the other divs, now here my problem is i have created two functions, 1st (for adding divs and disabling all the divs except 1st) and writing content to it, and other for enabling the div whose page number is clicked, and i have called the Adding div function on body onload; now first time when i run, page everthing goes well, but next time when i click on any of the page number, it just gets enabled and again that AddDiv function, runs and re-enables all the divs..
Please reply why this is happening and how should i resolve my issue...
Below is my script, content for the div are coming using Json.
<body onload="JsonScript();">
<script language="javascript" type="text/javascript">
function JsonScript()
{
var existingDiv = document.getElementById("form1");
var newAnchorDiv = document.createElement("div");
newAnchorDiv.id = "anchorDiv";
var list = { "Article": articleList };
for(var i=0; i < list.Article.length; i++)
{
var newDiv = document.createElement("div");
newDiv.id = "div"+(i+1);
newDiv.innerHTML = list.Article[i].toString();
newAnchorDiv.innerHTML += "<a href='' onclick='displayMessage("+(i+1)+")'>"+(i+1)+"</a> ";
existingDiv.appendChild(newDiv);
existingDiv.appendChild(newAnchorDiv);
}
for(var j = 2; j < list.Article.length + 1; j ++)
{
var getDivs = document.getElementById("div"+j);
getDivs.style.display = "none";
}
}
function displayMessage(currentId) {
var list = {"Article" : articleList}
document.getElementById("div"+currentId).style.display = 'block';
for(var i = 1; i < list.Article.length + 1; i++)
{
if (i != currentId)
{
document.getElementById("div"+i).style.display = 'none';
}
}
}
</script>
Thanks and Regards
Try adding
return false;to the page link to prevent the page from being reloaded.