Click photo slideshow

Question

I am trying to make my photos appear in sequence when I click each one of them. When I click the first image it goes to the second, but I don't get the same for the third.

The code at the main page:

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.html",true);
xmlhttp.send();
}
</script>



<div id="myDiv">

<h2><a><button type="submit" onclick="loadXMLDoc()"><img src="/project2_ver3/vor/pic5.jpg" alt="vor" width="540" height="418"/></a></button></h2>

</div>

Then the code at ajax_info.html:

<!DOCTYPE html>
<html>
<body>

<script>
function loadXMLDoc2()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDivv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","\project2_ver3\ajax_infoo.html",true);
xmlhttp.send();
}
</script>



<div id="myDivv">

<h2><button type="submit" onclick="loadXMLDoc2()"><img src="/project2_ver3/vor/pic2.jpg" alt="vor" width="540" height="418"/></button></h2>

</div>




</body>
</html>

And finally, the code at ajax_infoo.html:

(code trimmed):

xmlhttp.open("GET","ajax_infooo.html",true);
xmlhttp.send();
}
</script>
<div id="myDiv">
<h2><button type="submit" onclick="loadXMLDoc2()"><img src="/project2_ver3/vor/pic1.jpg" alt="vor" width="540" height="418"/></button></h2>
</div>
</body>
</html>

Please see answer to similar question: http://stackoverflow.com/questions/5628108/simplest-ajax-photo-gallery — Amy, Mar 25 '13 at 18:50
Any reason you can't use a common library like JQuery to handle all these little details? — 000, Mar 26 '13 at 04:20
http://stackoverflow.com/questions/11694977/setting-innerhtml-with-a-script-inside http://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml — Musa, Mar 26 '13 at 04:24

score 0 · Answer 1 · answered Apr 18 '13 at 00:46

0

The problem is that you are replacing the complete "myDiv" innerHTML. Doing this will deactivate the onclick function you wrote for the button. Try addressing that problem. That should solve it.

answered Apr 18 '13 at 00:46

Krishna Chaitanya

438
4
16

Click photo slideshow

1 Answers1