J'essaie de créer 5 images à 5 endroits différents à l'intérieur de ma div # leftside. Je crée 5 images, mais elles sont dans la même position et ne sont pas réparties au hasard dans mon div. Voici un code ... Quelqu'un peut-il aider?

<!DOCTYPE html>
<html lang="en">
<head http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Matching game</title>
    <style type="text/css">
        img {position: absolute;}
        div {position: absolute;width: 500px;height: 500px;}
        #rightSide { left: 500px;
            border-left: 1px solid black }
    </style>
    <script type="text/javascript">
    function generateFaces() {
        var numberOfFaces = 5;
        var theLeftSide = document.getElementById("leftSide");
        var i = 0;
        var topvar = (Math.floor(Math.random()*400));
        var leftvar = (Math.floor(Math.random()*400));
        if (i < 5){ 
            numberOfFaces = document.createElement("img");
            i++;
            numberOfFaces.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
            numberOfFaces.style.top = topvar + 'px';
            numberOfFaces.style.left = leftvar + 'px';
            theLeftSide.appendChild(numberOfFaces);
        }


    }
    </script>
</head>
<body onload="generateFaces()">
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>

</body>
</html>
0
Lazar Nikolic 5 mars 2016 à 01:40

3 réponses

Meilleure réponse

Vous utilisiez une instruction if lorsque vous vouliez une boucle while. De plus, vous deviez déplacer la logique de positionnement dans la boucle.

https://jsfiddle.net/knwL2bn4/

Refactor:

    <!DOCTYPE html>
<html lang="en">
<head http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Matching game</title>
    <style type="text/css">
        img {position: absolute;}
        div {position: absolute;width: 500px;height: 500px;}
        #rightSide { left: 500px;
            border-left: 1px solid black }
    </style>
    <script type="text/javascript">
        function generateFaces() {
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            var i = 0;

            while (i < 5){ 
                var topvar = (Math.floor(Math.random()*400));
                var leftvar = (Math.floor(Math.random()*400));
                numberOfFaces = document.createElement("img");
                i++;
                numberOfFaces.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
                numberOfFaces.style.top = topvar + 'px';
                numberOfFaces.style.left = leftvar + 'px';
                theLeftSide.appendChild(numberOfFaces);
            }


        }
    </script>
</head>
<body onload="generateFaces()">
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>

</body>
</html>
1
Tate Thurston 4 mars 2016 à 22:52

Vous devez utiliser la boucle for

function generateFaces() {
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            var i;
      for (i = 0; i < 5; i += 1) {
            var topvar = (Math.floor(Math.random()*400));
            var leftvar = (Math.floor(Math.random()*400));
            numberOfFaces = document.createElement("img");
            numberOfFaces.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
            numberOfFaces.style.top = topvar + 'px';
            numberOfFaces.style.left = leftvar + 'px';
            theLeftSide.appendChild(numberOfFaces);
        }
    }
0
Dmitriy 4 mars 2016 à 22:47

Je ne sais pas trop ce que vous essayez de faire là-bas, mais je l'ai réécrit dans un violon. Vous devrez peut-être l'ajuster pour qu'il fasse ce que vous voulez:

Violon

HTML

<body>
  <p>Click on the extra smiling face on the left.</p>
  <div id="leftSide"></div>
  <div id="rightSide"></div>
</body>

Javascript

function generateFaces() {
  var face;
  var theLeftSide = document.getElementById("leftSide");
  for (i = 0; i < 5; i++) {
    var topvar = (Math.floor(Math.random() * 400));
    var leftvar = (Math.floor(Math.random() * 400));
    face = document.createElement("img");
    face.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
    face.style.top = topvar + 'px';
    face.style.left = leftvar + 'px';
    theLeftSide.appendChild(face);
  }
}
generateFaces();

CSS

img {
  position: absolute;
}

div {
  position: absolute;
  width: 500px;
  height: 500px;
}
0
SScotti 4 mars 2016 à 23:01