javascript - Getting random number from php file using ajax wont update with new result -

i mucking around thought might simple thing do, generate random numbers using jquery ajax. have index.php polls generator.php random number , code follows

index.php :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> setinterval(function(){ $.ajax({ url:'./generator.php', cache : false, success: function(data){     document.write(data.foo); }, datatype: "json"}); }, 3000);    </script> 

generator.php :

<?php $x = rand(10,100); $array = array(     'foo'  => $x     ); echo json_encode($array); ?> 

so works fine on first load, gets random number generator.php after index.php continues load gets nothing @ , number displayed stays same. doing wrong here?

i think problem document.write(data.foo);. replace with:

document.getelementbyid('anid').innerhtml = data.foo; 

and add element id of "anid" in html document, before script.

<div id="anid"></div> <script type="text/javascript"> setinterval(function(){ $.ajax({ url:'./generator.php', cache : false, success: function(data){     document.getelementbyid('anid').innerhtml = data.foo; }, datatype: "json"}); }, 3000);    </script>