javascript　を、以下の二重丸のところを付属して動くようにしたい

先ほどは使い慣れていないのもあり雑な質問の仕方をしてしまいすいません。

以下javaの二重丸のところの指示を書き足して、「サイコロを振る」のボタンを押すと、このように

つらつらと数字が出てくる動作を実行したいです。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>無題ドキュメント</title>
6<link rel="stylesheet" href="style.css">
7</head>
8
9<body>
10
11<div id="history"></div>
12<dl id="stats">
13	<dt>1</dt>
14	<dd></dd>
15	<dt>2</dt>
16	<dd></dd>
17	<dt>3</dt>
18	<dd></dd>
19	<dt>4</dt>
20	<dd></dd>
21	<dt>5</dt>
22	<dd></dd>
23	<dt>6</dt>
24	<dd></dd>
25</dl>
26<button id="dice">サイコロを振る</button>
27<button id="sort">並び替え</button>
28<script src="javascript.js"></script>
29</body>
30</html>

css
1
2
3@charset "UTF-8";
4/* CSS Document */
5body{
6	text-align: center;
7	padding: 40px;
8}
9
10#history{
11	border: 4px solid #33AA66;
12	margin: 40px auto;
13	min-height: 1em;
14	padding: 20px;
15	color: #33AA66;
16	font-size: 24px;
17	line-height: 1;
18}
19dl#stats{
20	margin: 40px auto;
21	color: #33AA66;
22	font-weight: bold;
23	text-align: center;
24}
25dl#stats dt, dl#stats dd{
26	display:inline;
27	margin: 0;
28	padding: 0;
29	font-size: 16px;
30	font-weight: normal;
31	
32}
33dl#stats df:after {
34	content:":";
35}
36dl#stats dd {
37	margin-right: 10px;
38	font-weight: bold;
39	color: #0066FF;
40}
41button{
42	background-color: #33AA66;
43		border: none;
44	display: inline-block;
45	padding: 16px 32px;
46	color: #FFFFFF;
47	font-size: 16px;
48	text-align: center;
49	text-decoration: none;
50	
51}

java
1// JavaScript Document
2
3//変数 dice :ボタン
4var dice = document.getElementById('dice');
5//変数 dice　：ボタン
6var sort = document.getElementById('sort');
7//変数　dicehistory :履歴。idがhistoryの要素を取得
8var diceHistory= document.getElementById('history');
9//◎変数　stats : HTML要素　stats を取得
10
11//◎変数　 statsItems :上記　stats　中のdd要素をすべて取得
12
13//変数　numbers: 出た数字を入れる配列
14var numbers= [];
15//◎変数　counts カウントした各数を入れる配列
16
17dice.addEventListner('click',diceClickHandler);
18//◎sortボタンを押した時に関数sortClickHandlerを実行
19
20function diceClickHandler(){
21	//サイコロを振る（ランダム）
22	var num = Math.floor(Math.random() * 6 + 1);
23	numbers.push(num);
24	//◎配列countsの該当する要素を1加算する
25	
26	updateDiceHistory();
27}
28function updateDiceHistory(){
29	//履歴表示をアップデート
30	diceHistory.innerHTML = numbers.join(' _ ');
31	dicplayCount();
32}
33function displayCount(){
34	//◎繰り返し処理を使って、counts　の各項目を　statsItemsの各dd要素に表示
35}
36
37

kei344

2017/10/11 07:00

質問タグに「JavaScript」を追加されてはいかがでしょうか。また、質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。あと、「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

Lhankor_Mhy

2017/10/11 08:07

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13180605698

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

回答2件

ベストアンサー

的外れかもしれませんが、質問者さんが想像する動作は以下のような動作でしょうか？

HTML
1<!doctype html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>無題ドキュメント</title>
6    <style type="text/css">
7        body {
8            text-align: center;
9            padding: 40px;
10        }
11
12        #history {
13            border: 4px solid #33AA66;
14            margin: 40px auto;
15            min-height: 1em;
16            padding: 20px;
17            color: #33AA66;
18            font-size: 24px;
19            line-height: 1;
20        }
21
22        dl#stats {
23            margin: 40px auto;
24            color: #33AA66;
25            font-weight: bold;
26            text-align: center;
27        }
28
29        dl#stats dt, dl#stats dd {
30            display: inline;
31            margin: 0;
32            padding: 0;
33            font-size: 16px;
34            font-weight: normal;
35
36        }
37
38        dl#stats dt:after { /* dfをdtに修正 */
39            content: ":";
40        }
41
42        dl#stats dd {
43            margin-right: 10px;
44            font-weight: bold;
45            color: #0066FF;
46        }
47
48        button {
49            background-color: #33AA66;
50            border: none;
51            display: inline-block;
52            padding: 16px 32px;
53            color: #FFFFFF;
54            font-size: 16px;
55            text-align: center;
56            text-decoration: none;
57        }
58    </style>
59</head>
60<body>
61<div id="history"></div>
62<dl id="stats">
63    <dt>1</dt>
64    <dd></dd>
65    <dt>2</dt>
66    <dd></dd>
67    <dt>3</dt>
68    <dd></dd>
69    <dt>4</dt>
70    <dd></dd>
71    <dt>5</dt>
72    <dd></dd>
73    <dt>6</dt>
74    <dd></dd>
75</dl>
76<button id="dice">サイコロを振る</button>
77<button id="sort">並び替え</button>
78<script>
79    var dice = document.getElementById('dice');
80    var sort = document.getElementById('sort');
81    var diceHistory = document.getElementById('history');
82    var stats = document.getElementById("stats");
83    var dd = stats.querySelectorAll("dd");
84    var numbers = [];
85    //◎変数　counts カウントした各数を入れる配列: 質問文からはどのようなものか分からなかったので未実装
86
87    dice.addEventListener('click', diceClickHandler); // addEventListnerをaddEventListenerに修正
88    sort.addEventListener('click', sortClickHandler);
89
90    function sortClickHandler() {
91        numbers.sort(function (n, m) {
92            return n - m;
93        });
94        updateDiceHistory();
95    }
96
97    function diceClickHandler() {
98        if (numbers.length >= 6) return false;
99        var num = Math.floor(Math.random() * 6 + 1);
100        numbers.push(num);
101        //◎配列countsの該当する要素を1加算する: 質問文からはどのようなものか分からなかったので未実装
102        updateDiceHistory();
103    }
104
105    function updateDiceHistory() {
106        diceHistory.innerHTML = numbers.join(' _ ');
107        displayCount(); // dicplayCountからdisplayCountに修正
108    }
109
110    function displayCount() {
111        for (var i = 0; i < dd.length; i++) {
112            dd[i].textContent = numbers[i];
113        }
114    }
115</script>
116</body>
117</html>