teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

現状の課題を定義

2020/10/12 01:59

投稿

ikikikoko
ikikikoko

スコア9

title CHANGED
File without changes
body CHANGED
@@ -1,92 +1,53 @@
1
- スタートを押すと用意していた配列の文字列がランダムで動き
2
- Stop押す止まる使用を作り
1
+ 以下のサンプルコードに実装しのですが
2
+ エラーが出てしまいます。
3
3
 
4
- ```Javascript
4
+ どこを直せば良いのでしょうか
5
- var startBtn = document.getElementById('start');
5
+ application.js:10 Uncaught Error: Cannot find module '../random'
6
- var isStart = false;
7
- var roulette = document.getElementById('roulette');
6
+ at webpackMissingModule (application.js:10)
7
+ at Object../app/javascript/packs/application.js (application.js:10)
8
- var place = '';
8
+ at __webpack_require__ (bootstrap:19)
9
- var intervalID = -1;
10
- var spotList = [];
9
+ at bootstrap:83
10
+ at bootstrap:83
11
+ webpackMissingModule @ application.js:10
12
+ ./app/javascript/packs/application.js @ application.js:10
13
+ __webpack_require__ @ bootstrap:19
14
+ (anonymous) @ bootstrap:83
15
+ (anonymous) @ bootstrap:83
16
+ themes:35 GET http://localhost:3000/random.js net::ERR_ABORTED 404 (Not Found)
17
+ themes:42 Uncaught ReferenceError: clickedStart is not defined
18
+ at HTMLButtonElement.onclick (themes:42)
11
19
 
12
- // 行きたい場所
13
- const spotList = ['あいうえおかきくけこ', 'かきくけこ', 'なにぬねの'];
20
+ https://jsfiddle.net/Lhankor_Mhy/gnq08t3z/
14
21
 
15
- // スタートボタンを押したときの処理
16
- function clickedStart() {
17
- 'use strict';
18
- isStart = true;
19
- startBtn.disabled = true;
20
- intervalID = setInterval(function() {
21
- if(isStart === true) {
22
- place = spotList[Math.floor( Math.random() * spotList.length )];
23
- roulette.className = 'name';
24
- document.getElementById("isPlace").innerHTML = place;
25
- }
26
- }, 100);
22
+ ```html
27
- }
28
23
 
29
- // ストップボタンを押した時の処理
30
- function clickedStop() {
31
- 'use strict';
32
- clearTimeout(intervalID);
33
- startBtn.disabled = "";
34
- isStart = false;
24
+ <head>
35
- if(place === '') {
36
- alert("スタートボタンを押してからストップボタンを押してね!");
25
+ <script src="random.js"></script>
37
- } else {
38
- // 結果を画面に表示
26
+ </head>
39
- roulette.className = 'name';
27
+ <div id="roulette">
40
- document.getElementById("isPlace").innerHTML = place;
28
+ <p id="isPlace">11111</p>
41
- }
29
+ </div>
42
- }
43
30
 
31
+ <div class="buttons">
32
+ <button id="start" onClick="clickedStart()">start</button>
33
+ <button id="stop" onClick="clickedStop()">stop</button>
44
- ```
34
+ </div>
45
35
 
46
36
 
47
- ```Html
37
+ コード
48
- <!DOCTYPE html>
49
- <html lang="ja">
50
- <head>
51
- <meta charset="utf-8">
52
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
53
- <link rel="stylesheet" type="text/css" href="css/style.css">
54
- <title>ランダムで行きたい場所を探す</title>
55
- </head>
56
- <body>
57
- <header>
58
-
59
- </header>
60
- <article class="wapper">
61
- <div class="main">
62
- <div id="roulette">
63
- <p id="isPlace">シャッフルスタート</p>
64
- </div>
65
- <div class="buttons">
66
- <button id="start" onClick="clickedStart()">start</button>
67
- <button id="stop" onClick="clickedStop()">stop</button>
68
- </div>
69
- </div>
70
-
71
- <script src=random.js></script>
72
- </body>
73
- </html>
74
38
  ```
75
39
 
76
40
 
41
+ ```Javasprict
42
+ const 用意していた文字 = ["用意していた文字1","用意していた文字2"];
77
- エラー分が
43
+ let timer;
44
+ var clickedStart = ()=> timer = setInterval(
78
- Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
45
+ ()=> isPlace.textContent = 用意していた文字[ Math.floor( Math.random() * 用意していた文字.length ) ],
46
+ 100
79
- SyntaxError: /Users/emechi/projects/online_pp/app/javascript/random.js: Identifier 'spotList' has already been declared (9:6)
47
+ );
80
48
 
81
- 7 |
82
- 8 | // 行きたい場所
83
- > 9 | const spotList = ['あいうえおかきくけこ', 'かきくけこ', 'なにぬねの'];
84
- | ^
85
- 10 |
86
- 11 | // スタートボタンを押したときの処理
87
- 12 | function clickedStart() {
49
+ var clickedStop= ()=> clearInterval( timer );
88
- at Parser._raise (Users/emechi/projects/online_pp/node_modules/@babel/parser/lib/index.js:766)
89
- at
90
50
 
91
51
 
52
+
92
- 何回見てもやり方がわかりません
53
+ ```