Javascript Nodes: appending image with random positions to div element

Question

I am trying to append an image to appear in the left side div using randomly generated top and left positions, and think that my code is fine, but its not working, can anyone help? When debugging it says

Uncaught SyntaxError: Unexpected identifier.
Uncaught ReferenceError: generateFaces is not defined.

I am confused why the function generateFaces is not defined.

function generateFaces() {
  var numberOfFaces = 5;
  var theLeftSide = document.getElementById("leftSide");

  var  this_img  =  document.createElement("img");
  this_img.src = "smile.png";

  var  random_top  =  Math.random()  *  400;
  random_top  =  Math.floor(random_top);
  this_img.style.top = random_top + "px";

  var  random_left  =  Math.random()  *  400;
  random_left  =  Math.floor(random_left);
  this_img.style.left = random_left + "px";

  theLeftSide.appendChild(this_img);

}

img {
  position: absolute;
}
div {
  position: absolute;
}
#leftSide {
  width: 500px;
  height: 500px;
}
#rightSide {
  width: 500px;
  height: 500px;
  left: 500px;
  border-left: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
  <title>Matching Game!</title>
</head>

<body id="theBody" onload="generateFaces()">
  <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>

`generateFaces` is undefined because of the **previous** error the web console is reporting: `SyntaxError: Unexpected token ILLEGAL`. Fix the syntax error, and the function will be defined. The syntax error appears to be invisible space characters or similar in various places in the code, mostly just before or just after the `;`. — T.J. Crowder, Feb 23 '16 at 07:14
@Zak, Refer [this](https://jsfiddle.net/rayon_1990/smvw54gu/1/) — Rayon, Feb 23 '16 at 07:25
@Zak: Well, I told you what was wrong, and where. If you can't run with that... — T.J. Crowder, Feb 23 '16 at 07:28
@RayonDabre: Which is great, but what are you going to do the *next* time he needs a fish? — T.J. Crowder, Feb 23 '16 at 07:28
@RayonDabre Thanks for testing it. It apparently works with the same code. The only diiference I could tell was the image path. Why do you think it might not be working on my end (the image path is correct)? — Zak, Feb 23 '16 at 07:30
@Zak, Refer [this answer](http://stackoverflow.com/questions/12719859/no-visible-cause-for-unexpected-token-illegal) before you proceed... T.J. I agree with you.. — Rayon, Feb 23 '16 at 07:31
@Zak, There is an invisible character in the code, right after the semicolon which was causing `Unexpected token ILLEGAL`. Image path was added just to make it look pretty.... — Rayon, Feb 23 '16 at 07:33
@RayonDabre Yes I understand it an invisible character which I cannot see but isnt there a way to remove these characters? I tried pasting the code to notepad and adding back but that doesnt work, the solutions on SO are very technical — Zak, Feb 23 '16 at 07:53

score 0 · Answer 1 · answered Feb 23 '16 at 08:14

0

So apparently there were invisible characters in the code which were solved by adding the following to the head section:

<meta http-equiv="content-type" content="text/html"; charset = "UTF-8">

answered Feb 23 '16 at 08:14

Zak

1
2

score 0 · Answer 2 · answered Dec 11 '16 at 00:08

Zak's question directly pertains to implementation of the third and final project (Matching Game) for the "HTML, CSS and JavaScript" course from Hong Kong University of Science and Technology. Specifications for the project include:

"A function generateFaces() is created...In this function the faces are created in a loop. The loop executes numberOfFaces times...The img src attribute is set so that the appropriate image filename is used e.g. img.src="smile.png"...Add the newly created image to the leftSide div using appendChild()."

Gor · Answer 3 · 2016-02-23T14:07:08.497

-1

Please check here

I found your bug. You just use another semicolons.

edited Feb 23 '16 at 14:07

answered Feb 23 '16 at 08:06

Gor

2,808
6
25
46

I dont follow. What do you mean by [here][1]? – Zak Feb 23 '16 at 08:08

Javascript Nodes: appending image with random positions to div element

3 Answers3