Randomizing locations of css with JavaScript

Question

It should randomize the location of a black circle when pressed but I can't figure out why it isn't working.

 function myFunction1(button) { var xPosition = math.floor(math.random() * 101) + '%'; button.style.top = xPosition; var yPosition = math.floor(math.random() * 101) + '%'; button.style.left = yPosition; }

 .circle { width: 100px; height: 100px; background-color: red; border-radius: 50%; } .black { background-color: black; }

 <button type="button" class="black circle" onclick="myFunction1(this)"></button>

Answer 1

Try this:

Change math... to M ath..

And add this to css:

.circle {
  ...
  position: fixed;
}

Like this:

 function myFunction1(button) { var xPosition = Math.floor(Math.random() * 101) + '%'; button.style.top = xPosition; var yPosition = Math.floor(Math.random() * 101) + '%'; button.style.left = yPosition; }

 .circle { width: 100px; height: 100px; background-color: red; border-radius: 50%; position: fixed; } .black { background-color: black; }

 <button type="button" class="black circle" onclick="myFunction1(this)"></button>