teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ルーレットを作りたい　HTML,CSSで

編集履歴

質問編集履歴

1

現状の課題を定義

2020/10/12 01:59

投稿

ikikikoko
ikikikoko

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,88 +1,76 @@
1
- スタートを押すと用意していた配列の文字列がランダムで動き
1
+ 以下のサンプルコードをもとに実装したのですが
2
2
 
3
- Stopを押すと止まる使用を作りたい
3
+ エラーが出てしまいます。
4
4
 
5
5
 
6
6
 
7
- ```Javascript
7
+ どこを直せば良いのでしょうか
8
8
 
9
- var startBtn = document.getElementById('start');
9
+ application.js:10 Uncaught Error: Cannot find module '../random'
10
10
 
11
- var isStart = false;
11
+ at webpackMissingModule (application.js:10)
12
12
 
13
- var roulette = document.getElementById('roulette');
13
+ at Object../app/javascript/packs/application.js (application.js:10)
14
14
 
15
- var place = '';
15
+ at __webpack_require__ (bootstrap:19)
16
16
 
17
- var intervalID = -1;
17
+ at bootstrap:83
18
18
 
19
- var spotList = [];
19
+ at bootstrap:83
20
+
21
+ webpackMissingModule @ application.js:10
22
+
23
+ ./app/javascript/packs/application.js @ application.js:10
24
+
25
+ __webpack_require__ @ bootstrap:19
26
+
27
+ (anonymous) @ bootstrap:83
28
+
29
+ (anonymous) @ bootstrap:83
30
+
31
+ themes:35 GET http://localhost:3000/random.js net::ERR_ABORTED 404 (Not Found)
32
+
33
+ themes:42 Uncaught ReferenceError: clickedStart is not defined
34
+
35
+ at HTMLButtonElement.onclick (themes:42)
20
36
 
21
37
 
22
38
 
23
- // 行きたい場所
24
-
25
- const spotList = ['あいうえおかきくけこ', 'かきくけこ', 'なにぬねの'];
39
+ https://jsfiddle.net/Lhankor_Mhy/gnq08t3z/
26
40
 
27
41
 
28
42
 
29
- // スタートボタンを押したときの処理
30
-
31
- function clickedStart() {
32
-
33
- 'use strict';
34
-
35
- isStart = true;
36
-
37
- startBtn.disabled = true;
38
-
39
- intervalID = setInterval(function() {
40
-
41
- if(isStart === true) {
42
-
43
- place = spotList[Math.floor( Math.random() * spotList.length )];
44
-
45
- roulette.className = 'name';
46
-
47
- document.getElementById("isPlace").innerHTML = place;
48
-
49
- }
50
-
51
- }, 100);
43
+ ```html
52
-
53
- }
54
44
 
55
45
 
56
46
 
57
- // ストップボタンを押した時の処理
47
+ <head>
58
48
 
59
- function clickedStop() {
49
+ <script src="random.js"></script>
60
50
 
61
- 'use strict';
51
+ </head>
62
52
 
63
- clearTimeout(intervalID);
53
+ <div id="roulette">
64
54
 
65
- startBtn.disabled = "";
55
+ <p id="isPlace">11111</p>
66
56
 
67
- isStart = false;
68
-
69
- if(place === '') {
70
-
71
- alert("スタートボタンを押してからストップボタンを押してね！");
72
-
73
- } else {
74
-
75
- // 結果を画面に表示
57
+ </div>
76
-
77
- roulette.className = 'name';
78
-
79
- document.getElementById("isPlace").innerHTML = place;
80
-
81
- }
82
-
83
- }
84
58
 
85
59
 
60
+
61
+ <div class="buttons">
62
+
63
+ <button id="start" onClick="clickedStart()">start</button>
64
+
65
+ <button id="stop" onClick="clickedStop()">stop</button>
66
+
67
+ </div>
68
+
69
+
70
+
71
+
72
+
73
+ コード
86
74
 
87
75
  ```
88
76
 
@@ -90,94 +78,28 @@
90
78
 
91
79
 
92
80
 
93
- ```Html
81
+ ```Javasprict
94
82
 
95
- <!DOCTYPE html>
83
+ const 用意していた文字 = ["用意していた文字1","用意していた文字2"];
96
84
 
97
- <html lang="ja">
85
+ let timer;
98
86
 
99
- <head>
87
+ var clickedStart = ()=> timer = setInterval(
100
88
 
101
- <meta charset="utf-8">
89
+ ()=> isPlace.textContent = 用意していた文字[ Math.floor( Math.random() * 用意していた文字.length ) ],
102
90
 
103
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
91
+ 100
104
92
 
105
- <link rel="stylesheet" type="text/css" href="css/style.css">
93
+ );
106
94
 
107
- <title>ランダムで行きたい場所を探す</title>
108
95
 
109
- </head>
110
96
 
111
- <body>
112
-
113
- <header>
114
-
115
-
116
-
117
- </header>
118
-
119
- <article class="wapper">
97
+ var clickedStop= ()=> clearInterval( timer );
120
-
121
- <div class="main">
122
-
123
- <div id="roulette">
124
-
125
- <p id="isPlace">シャッフルスタート</p>
126
-
127
- </div>
128
-
129
- <div class="buttons">
130
-
131
- <button id="start" onClick="clickedStart()">start</button>
132
-
133
- <button id="stop" onClick="clickedStop()">stop</button>
134
-
135
- </div>
136
-
137
- </div>
138
-
139
-
140
-
141
- <script src=random.js></script>
142
-
143
- </body>
144
-
145
- </html>
146
-
147
- ```
148
98
 
149
99
 
150
100
 
151
101
 
152
102
 
153
- エラー分が
154
-
155
- Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
156
-
157
- SyntaxError: /Users/emechi/projects/online_pp/app/javascript/random.js: Identifier 'spotList' has already been declared (9:6)
158
103
 
159
104
 
160
-
161
- 7 |
105
+ ```
162
-
163
- 8 | // 行きたい場所
164
-
165
- > 9 | const spotList = ['あいうえおかきくけこ', 'かきくけこ', 'なにぬねの'];
166
-
167
- | ^
168
-
169
- 10 |
170
-
171
- 11 | // スタートボタンを押したときの処理
172
-
173
- 12 | function clickedStart() {
174
-
175
- at Parser._raise (Users/emechi/projects/online_pp/node_modules/@babel/parser/lib/index.js:766)
176
-
177
- at
178
-
179
-
180
-
181
-
182
-
183
- 何回見てもやり方がわかりません