回答編集履歴

1

うごくやつ

2017/12/18 08:54

投稿

nnahito
nnahito

スコア2004

test CHANGED
@@ -5,3 +5,107 @@
5
5
 
6
6
 
7
7
  `$('result').fadeIn(300);`
8
+
9
+
10
+
11
+
12
+
13
+ ## うごくやつ
14
+
15
+
16
+
17
+ ```html
18
+
19
+ <script
20
+
21
+ src="https://code.jquery.com/jquery-3.2.1.min.js"
22
+
23
+ integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
24
+
25
+ crossorigin="anonymous"></script>
26
+
27
+
28
+
29
+ <div id="id1">たたり</div>
30
+
31
+ <div id="id2">あたり</div>
32
+
33
+ <div id="id3">おおあたり</div>
34
+
35
+
36
+
37
+ <hr>
38
+
39
+
40
+
41
+ <div id="result" style="display: none;"></div>
42
+
43
+
44
+
45
+ <button id="btn">おみくじる</button>
46
+
47
+
48
+
49
+ <script>
50
+
51
+ //おみくじの結果をランダムで表示
52
+
53
+ function getOmikuji () {
54
+
55
+ var omikuji = ["id1","id2","id3"];
56
+
57
+ var index = Math.floor(Math.random() * omikuji.length); // ランダムで0-2の値を取得
58
+
59
+ var id = omikuji[index]; // ランダムで取得した値に対応するidを取得
60
+
61
+ var el = document.getElementById(id); // idに対する要素を取得
62
+
63
+ var result = el.outerHTML; // div内のtextを取得
64
+
65
+
66
+
67
+ console.log(result);
68
+
69
+ document.getElementById('result').innerHTML = result; // 結果を表示
70
+
71
+ }
72
+
73
+
74
+
75
+ //結果の表示・非表示
76
+
77
+ $(function(){
78
+
79
+
80
+
81
+ $('#btn').click(function(){
82
+
83
+
84
+
85
+ getOmikuji();
86
+
87
+
88
+
89
+ //フェードインで表示
90
+
91
+ $('#result').fadeIn(1000);
92
+
93
+
94
+
95
+ //ボタンを非表示にする
96
+
97
+ $(this).hide();
98
+
99
+ });
100
+
101
+
102
+
103
+ });
104
+
105
+
106
+
107
+ </script>
108
+
109
+
110
+
111
+ ```