position:absoluteの値をjavascriptでランダムに決める

###実現したいこと
javascript超初心者です。
javascriptでposition:absoluteの数値をランダムに決めたいのですが乱数をpositionの値に入れる方法がわかりません。
なるべくjQueryではなくjavascriptでやりたいです。

###ソースコード

html
1<div id="container">
2  <div class="circle"></div>
3  <div class="circle"></div>
4  <div class="circle"></div>
5  <div class="circle"></div>
6</div>

CSS
1html, body {
2  margin: 0;
3  padding: 0;
4  height: 100%;
5}
6#container {
7  width: 100%;
8  height: 100%;
9  position: relative;
10}
11.circle {
12  width: 60px;
13  height: 60px;
14  border-radius: 50%;
15  background: #2cb4ad;
16  position: absolute;
17}

javascript
1var $elementReference = document.getElementsByClassName( ".circle" );
2 $elementReference.style.top = $top;
3}
4
5var $elementReference = document.getElementsByClassName( ".circle" );
6 $elementReference.style.left = $left;
7
8var min = 1 ;
9var max = 100 ;
10var $top = Math.floor( Math.random() * (max + 1 - min) ) + min ;
11
12var min = 1 ;
13var max = 100 ;
14var $left = Math.floor( Math.random() * (max + 1 - min) ) + min ;
15

行動規範の内容に同意します

回答1件

ベストアンサー

色々と理解が違っているところがあります。
１．styleのtopやleftには0以外の場合単位が必須です。
２．getElementsByClassNameは配列で返るのでforなどで回す必要があります。
３．".circle"という書き方をしたい場合はquerySelectorを使います。

html
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <script
6  src="https://code.jquery.com/jquery-3.2.1.min.js"
7  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
8  crossorigin="anonymous"></script>
9</head>
10<style>
11html, body {
12  margin: 0;
13  padding: 0;
14  height: 100%;
15}
16#container {
17  width: 100%;
18  height: 100%;
19  position: relative;
20}
21.circle {
22  width: 60px;
23  height: 60px;
24  border-radius: 50%;
25  background: #2cb4ad;
26  position: absolute;
27}
28</style>
29
30<body>
31<div id="container">
32  <div class="circle"></div>
33  <div class="circle"></div>
34  <div class="circle"></div>
35  <div class="circle"></div>
36<button id="btn" style="float:right;">test</button>
37</div>
38</body>
39</html>
40<script>
41    $("#btn").click(function(){
42        var min = 1 ;
43        var max = 200 ;
44        var $top =0;
45        var $left =0;
46        
47        var $elementReference = document.getElementsByClassName( "circle" );
48        
49        for(var i=0;i<$elementReference.length;i++){
50            $top = Math.floor( Math.random() * (max + 1 - min) ) + min ;
51            $left = Math.floor( Math.random() * (max + 1 - min) ) + min ;
52            $elementReference[i].style.top=$top+'px';
53            $elementReference[i].style.left=$left+'px';
54        }
55    });
56</script>