Ad

Put Image On Div Randomly Using Javascript

- 1 answer

I am making matching game that images in left and right are different, and users have to find(I put one more image in left side). My problem is that I cannot call image on where I want. What should I have to fix? Thank you.

<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #leftside {
      float: left;
    }
    #rightside {
      float: right;
      left: 500px;
      border-left: 1px solid black
    }
  </style>
  <script>
    var numberOfFaces(5);
    var theLeftSide = document.getElementById("leftSide");

    function generateFaces() {
      var createElement("img");
      var position = Math.floor(Math.random() * 500);
      img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
      img.id = 'smileImage';
      createElement.setAttribute("height", position);
      createElement.setAttribute("width", position);
      document.getElementById('leftSide').appendChild(img);
    }
  </script>
</head>

<body>
  <h1>Matching Game</h1>
  <p>Click on the extra smiling face on the left.</p>
  <div id="leftside"></div>
  <div id="rightside"></div>
</body>

</html>
Ad

Answer

You need to set something to the result of createElement('img'). For example, you can change that line to var img = createElement('img');

You never actually use theLeftSide.

createElement is actually document.createElement.

You never defined the variable createElement. Since we called it img earlier, do so now.

leftSide is not the ID of any element, but leftside is. Change it so that all usages are capitalized the same.

After that, you actually need to call generateFaces. Because the page is loaded top-to-bottom, JavaScript doesn't yet know about the div with the ID of leftSide. You have to wait until the page is finished loading to call the Javascript, and you can do that by adding window.onload = generateFaces to the end of your script.

Here's the final result:

<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #leftside {
      float: left;
    }
    #rightside {
      float: right;
      left: 500px;
      border-left: 1px solid black
    }
  </style>
  <script>
    function generateFaces() {
      var img = document.createElement('img');
      var position = Math.floor(Math.random() * 500);
      img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
      img.id = 'smileImage';
      img.setAttribute('height', position);
      img.setAttribute('width', position);
      document.getElementById('leftSide').appendChild(img);
    }
    window.onload = generateFaces;
  </script>
</head>

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

</html>

Ad
source: stackoverflow.com
Ad