Javascriptで画像をランダム位置で表示させたいです。

###前提・実現したいこと
Javascriptで

1.width 100%、height 600pxのdiv#contentに
2.javascriptでクリックしたらクリックした分のdivが生成され
3.そのdivの中にimgが入って
4.そのimgはwidth 100%、height 600pxのdiv#contentのエリア上ランダム位置に表示される

を作りたいです。
html5,css3でChromeのみ対応で作っています。

###発生している問題・エラーメッセージ
正直何から始めていいか分からず、前提の4番目のことをどうjavascriptで組むべきか悩んでいます。
何から順番に始めたら組めるよなど何かご教授いただけたら嬉しいです。
何卒宜しくお願い申し上げます。

###該当のソースコード

html
1    <div id = "area">
2        <div class="logo"></div>
3        
4        <div id = "content">
5            <div id = "wrong"></div>
6        </div>
7        
8        <button id = "btn">Click!</button>
9    </div>

css
1#area{
2    width: 100%;
3    height: 100vh;
4    display: flex;
5    align-items: center;
6    flex-direction: column;
7    }
8#content{
9    position: relative;
10    width: 100%;
11    height: 600px;
12    }

javascript
1    var content = document.getElementById('content');
2
3    function getP00() {
4    //div生成
5    var positive = document.createElement("div");
6    positive.style.position = "absolute";
7    
8    //imgが入る
9    var image = document.createElement("img");
10    image.src = "public/img/cloud.png";
11    image.style.width = "100px";
12    image.style.height = "100px";
13
14    positive.appendChild(image);
15    content.appendChild(positive);

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

回答2件

次のように行っても良いと思います。

HTML
1<!DOCTYPE HTML>
2<html lang='ja'>
3<head>
4    <meta charset='UTF-8'>
5    <title>タイトル</title>
6    <style type='text/css'>
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        body {
13            text-align: center;
14        }
15
16        #content {
17            width: 100%;
18            height: 600px;
19            border: solid 1px black;
20        }
21    </style>
22</head>
23<body>
24<div id="content"></div>
25<button id="btn">クリック</button>
26<script>
27    function setRandomLeft(imageWidth) {
28        return (Math.random() * (document.getElementById("content").clientWidth - imageWidth)) + "px";
29    }
30
31    function setRandomTop(imageHeight) {
32        return (Math.random() * (document.getElementById("content").clientHeight - imageHeight)) + "px";
33    }
34
35    document.getElementById("btn").addEventListener("click", function () {
36        document.getElementById("content").innerHTML = "";
37        var image = document.createElement("img");
38        image.src = "https://placehold.jp/100x100.png";
39        image.style.position = "absolute";
40        image.style.top = setRandomTop("100");//画像の横の長さをsetRandomTopに。
41        image.style.left = setRandomLeft("100");//画像の縦の長さをsetRandomLeftに。
42        document.getElementById("content").appendChild(image);
43    });
44</script>
45</body>
46</html>

投稿2017/01/14 08:27

編集2017/01/14 08:36

s8_chu

総合スコア14731

退会済みユーザー

2017/01/17 10:19 編集

ご回答ありがとうございました。サンプルまで頂きありがとうございます。自分のコードに置き換えて、動きました！ありがとうございます。

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

ベストアンサー

#サンプルコード

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			html, body, #wrap {
8				width: 100%;
9				height: 100%;
10				padding: 0;
11				margin: 0;
12			}
13			#wrap {
14				background: #F6F6F6;
15			}
16		</style>
17	</head>
18	<body>
19		<div id="wrap">
20
21		</div>
22		<script type="text/javascript">
23			var wrap = document.getElementById('wrap');
24			wrap.addEventListener('click', function () {
25
26				var img = document.createElement('img');
27				img.src = 'https://dummyimage.com/100x100/bf50bf/0011ff';
28
29				var div = document.createElement('div');
30				div.appendChild(img);
31
32				div.style.width = '100px';
33				div.style.height = '100px';
34				div.style.backgroundColor = '#FFF';
35				div.style.boxShadow = '0 0 3px #888';
36				div.style.position = 'absolute';
37				div.style.padding = '2px';
38
39				var w = window.innerWidth;
40				var h = window.innerHeight;
41
42				var l = Math.floor(Math.random() * w);
43				var t = Math.floor(Math.random() * h);
44
45				div.style.top = t + 'px';
46				div.style.left = l + 'px';
47
48				this.appendChild(div);
49			});
50		</script>
51	</body>
52</html>