Question

我试图通过使用ajax一段时间后加载一个php文件。我想做的是一个小测验。我希望用户能够看到图像屏幕3秒钟，然后才能看到答案选项。我想连续3到4次这样做。例如; 1）问题图像过了几秒钟 2）答案选择点击答案后 3）第二个问题图像 ......继续这个订单。

我可以使用以下代码执行此操作：

<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>

但是，当此文件包含在另一个文件中时，此脚本不起作用。我怎样才能使它发挥作用？

<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>

上一页脚本在上面。我将此脚本与以下代码一起使用：

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

Answer 1

原因是因为您希望窗口触发onload事件：

window.onload = startFunction;

当ajax运行时加载窗口，为什么不直接调用该函数？

startFunction();

如果在脚本之前需要一些DOM元素，只需将脚本放在DOM元素下面，脚本就会在DOM准备好后运行。

Answer 2

您需要从change();

中删除function startFunction()

这是完整示例click here

我希望它会对你有所帮助。

随着时间改变div内容

2 个答案: