PHP/Javascriptで要素を更新する

Question

私はこのスクリプトを動作させようとしています。私はPHPの乱数生成器を作って、私は私のメインPHPページにフィードを取得し、ボタンを押すたびに生成された数値でdivを更新しようとしています。

これは動作します。それは数字を1回生成し、後で何回ボタンを押しても要素を更新しません。

私は要素を最初にクリアしなければならないかもしれないと思ったので、それを追加してもまだ動作しません。あなたは私を与えることができ、以下の./includes/randomRoller.php

<?php 
include("./includes/randomRoller.php") 
?> 
<style type="text/css"> 
#cookies { 
    width: 50px; 
    height: 100px; 
    background-color: #000000; 
    color: #ffffff; 
} 
#bunnies { 
    width: 100px; 
    height: 500px; 
    background-color: #555555; 
    color: red; 
} 
</style> 
<script> 
function roll() { 
    document.getElementById('bunnies').innerHTML = ''; 
    document.getElementById('bunnies').innerHTML = '<?php echo(roll()) ?>'; 
} 
</script> 
<button type="button" onClick="roll()">Test</button> 
<div id="cookies"> 
</div> 
<br> 
<br> 
<div id="bunnies"> 
</div> 

のindex.phpとrandomRoller.php

<?php 
    function roll() { 
     return rand(1 , 200); 
    } 
?> 

ための私のコードで任意のヒントやアドバイスをいただければ幸いです。それは重要なあなたがそうのように、乱数を作成するためのJSを使用することができない場合には、番号を生成するための別のページである場合、私は知らない

Answer 1

：あなたはAJAXを使用することができます

<script> 
function roll() { 
    var bunnies = document.getElementById('bunnies') 
    bunnies.innerHTML = Math.floor((Math.random() * 10) + 1); 
} 
</script> 
<button type="button" onClick="roll()">Test</button> 

（jQueryの

function roll() { 
    $.get("/includes/randomRoller.php", function(data) { 
    $("#bunnies").html(data); 
    }); 
}