Ordered list with random numbers between 1 and 49

I have some problems to Code an simple PHP ordered list that print out a random number list between 1 and 49.

The Main Code

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>AJAX</title>
<meta name="viewport" content=
"width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css"
href="lib/css/stil.css" />
<script type="text/javascript"
src="lib/js/script.js"></script>
</head>
<body>
<h1>Ziehung der Lottozahlen</h1>
<button id="frage">Starte die Ziehung</button>
<div id="antwort">
</div>
</body>
</html>

Here the external PHP Code to randomize the numbers

<?php
$zahlen = range (1, 49);
shuffle($zahlen);
for ($i = 0; $i < 6; $i++) {
echo $zahlen[$i] . " ";
 }
?>

And here the Java script

var resOb = new XMLHttpRequest();
window.onload = function() {
document.getElementById("frage").onclick = 
function () {
    resOb.open('get', 'lottozahlen1.php', true);
    resOb.onreadystatechange = function () {
        if (resOb.readyState == 4) {
            document.getElementById("antwort").innerHTML = 
            resOb.responseText;
}
    };
    resOb.send(null);
};
};

T Now my question…how i can let Show the numbers in a ordered list?

Answer

Extending Kool-Mind’s answer:

$zahlen = range (1, 49);

shuffle($zahlen);
$arr = array();
for ($i = 0; $i < 6; $i++) {
  $arr[$i] =$zahlen[$i] . " ";
}
sort($arr,1);
echo implode(' ',$arr);

Try adding the code below(to generate the list):

<script>
  $('#button').click(function(){
    $('#newDiv').append('<ol>');
    $('#newDiv').append('<?php foreach($arr as $a){echo"<li>".$a."";}?>');
    $('#newDiv').append('</ol>');
  })
</script>

Hope it helps =)

EDIT

This should be working fine now, hope it helps =)

<button id="button">Button</button>
<div id="newDiv"></div>

<script>
  var clicked = false;
  $('#button').click(function(){
    if (!clicked){
      <?php
      $arr = array();
      for ($i = 0; $i < 6; $i++) {
        $arr[$i] = rand(1,49);
      }
      sort($arr,1);
    ?>
    $('#newDiv').append('<ol>');
    $('#newDiv').append('<?php foreach($arr as $a){echo"<li>".$a."";}?>');
    $('#newDiv').append('</ol>');
    clicked = true;
   }
  })
</script>

Advertisement

Answer