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>

Math not math. You also need to set the position property via CSS to something like relative or absolute in order for the top and left to matter — j08691
– j08691, Commented Oct 26, 2021 at 15:31
See above. But even with that fix you still won't see it work, for same reason that this doesn't work even if you don't use JS. Set a top and left value on your CSS directly, to simulate "a single random location" and look at the result: what happens? — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Oct 26, 2021 at 15:31

allancoding · Accepted Answer · 2021-10-26 19:16:13Z

1

Try this:

Change math... to Math..

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>

answered Oct 26, 2021 at 19:16

allancoding

5457 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

allancoding Over a year ago

If this helped you mark it correct.

Collectives™ on Stack Overflow

Randomizing locations of css with JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related