Changing div content with time

Question

I am trying to load a php file after a while by using ajax. What I am trying to do is kind of a quiz. I want an image screen to be seen by user for 3 seconds and then the answer choices to be seen. I want to do this for 3 or 4 times in a row. For example; 1)The question image after a few seconds 2)Answer Choices After click on an answer 3)Second question image ... and go on with this order.

I can do this with below code:

<script type="text/javascript">

var content = [
  "<a href='resim1a.php'> link 1 </a>",
  "<a href='resim2a.php'> link 2 </a>",
  "insert html content"
];
var msgPtr = 0;
var stopAction = null;

function change() {
  var newMsg = content[msgPtr];
  document.getElementById('change').innerHTML = 'Message: '+msgPtr+'<p>'+newMsg;
  msgPtr++;  
  if(msgPtr==2)
  clearInterval(stopAction); 
}

function startFunction() { change();  stopAction = setInterval(change, 500); }
 window.onload = startFunction;
</script>

<div id="change" style="border:5px solid red;width:300px; height:200px;background-Color:yellow"> </div>

But, when this file is included by another file, this script does not work. How can I make it work?

<script type="text/javascript">
    function load(thediv, thefile){
      if (window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject ('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
      document.getElementById(thediv).innerHTML = xmlhttp.responseText;
      }
     }
     xmlhttp.open('GET', thefile , true);
     xmlhttp.send();
    }
    </script>

The previous page script is above. I use this script with the below code:

<div id="anotherdiv" >
        <input type="image" onclick="load('anotherdiv' , 'include.php');"src="buton1.png">
</div>

What do you mean with "included"? included with ``-tags, included via php, included later via ajax? The reason it probably doesn´t work is that the window is already loaded, so attaching startFunction to it will never be called. — luk2302, Jul 04 '13 at 11:54
I edited the question. Actually, you are right, the window is already loaded, so it is not loaded again. How can I find an alternative for my problem? thanks for your answer... — Halil, Jul 04 '13 at 12:03
startFunction(); does not work unfortunately.. is there another way to call this function without onclick event? — Halil, Jul 04 '13 at 12:11
maybe this can help you http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml — luk2302, Jul 04 '13 at 12:12

score 0 · Answer 1 · answered Jul 04 '13 at 12:03

The reason is because you are expecting the window to fire onload event:

window.onload = startFunction;

Window is loaded when the ajax is running, so why not call the function directly?

startFunction();

If you need some DOM elements before the script, just put the script below the DOM elements and the script will run after the DOM is ready.

score -1 · Answer 2 · answered Jul 04 '13 at 12:16

-1

you need to remove change(); from function startFunction()

here is the full example click here

I hope it will help for you.

answered Jul 04 '13 at 12:16

Sonu Sindhu

1,752
15
25

Simply "no". Why does he need to do that? – luk2302 Jul 04 '13 at 12:25
it works on own page when we remove change(); from function startFunction(). However it does not work again when it is loaded by another file... – Halil Jul 04 '13 at 12:29

Changing div content with time

2 Answers2