ルーレットを作りたい　HTML,CSSで

以下のサンプルコードをもとに実装したのですが
エラーが出てしまいます。

どこを直せば良いのでしょうか
application.js:10 Uncaught Error: Cannot find module '../random'
at webpackMissingModule (application.js:10)
at Object../app/javascript/packs/application.js (application.js:10)
at webpack_require (bootstrap:19)
at bootstrap:83
at bootstrap:83
webpackMissingModule @ application.js:10
./app/javascript/packs/application.js @ application.js:10
webpack_require @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
themes:35 GET http://localhost:3000/random.js net::ERR_ABORTED 404 (Not Found)
themes:42 Uncaught ReferenceError: clickedStart is not defined
at HTMLButtonElement.onclick (themes:42)

https://jsfiddle.net/Lhankor_Mhy/gnq08t3z/

html
1
2<head>
3<script src="random.js"></script>
4</head>
5<div id="roulette">
6<p id="isPlace">11111</p>
7</div>
8
9<div class="buttons">
10<button id="start" onClick="clickedStart()">start</button>
11<button id="stop" onClick="clickedStop()">stop</button>
12</div>
13
14
15コード

Javasprict
1const 用意していた文字 = ["用意していた文字1","用意していた文字2"];
2let timer;
3var clickedStart = ()=> timer = setInterval(
4  ()=> isPlace.textContent = 用意していた文字[ Math.floor( Math.random() * 用意していた文字.length ) ],
5  100
6);
7
8var clickedStop= ()=> clearInterval( timer );
9
10
11

m.ts10806

2020/10/11 19:09

＞HTML,CSSで JavaScriptも入っています。既にタグにはJavaScriptもあるのでタイトルに書く必要はないかと思います。過去質問を見ていると、ほぼタイトルが同じです。進んでいないということでしょうか？タイトルだけでも起きている問題が想像できるように、現在の課題の要件のみを書かれたほうが良いかと思います。あと、最初の質問でもらったコードが全然活きてないように思うのですが、なぜ解決済みとしたのでしょうか。 https://teratail.com/questions/297042 もし不明な点があればその場で回答者にコメントで確認して理解してから次に進んだ方がその後の質問はしなくて済んだように思います。

ikikikoko

2020/10/12 02:00

修正しました。現状だとJavaが読み込まれていないのでしょうか」

m.ts10806

2020/10/12 02:03

JavaとJavaScriptは全く別物なので、そこは間違いないようにお願いします。ただ、質問内容を随分変えてしまったようですね。それはそれで既存の回答に大きな影響が出ます。そのあたりはご配慮願います。

m.ts10806

2020/10/12 02:04

それに見た感じ、静的なプログラムではないですよね。 Ruby on Rails利用でしょうか。前提条件としてNode.jsも必要なのでは。環境情報として追記してください。ただ、質問内容は元に戻したうえで、「追記」してください。

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

回答1件

ベストアンサー

エラーメッセージある通りです。

Identifier 'spotList' has already been declared

訳：'spotList'はすでに宣言されています

以下の箇所で二重に宣言しているからですね。

var spotList = [];

// 行きたい場所
const spotList = ['あいうえおかきくけこ', 'かきくけこ', 'なにぬねの'];

投稿2020/10/11 15:36

nabenabe11234

総合スコア126

ikikikoko

2020/10/11 15:53

ありがとうございます。エラー分が下記に変わりました。 themes:96 Uncaught ReferenceError: clickedStart is not defined at HTMLButtonElement.onclick (themes:96) onclick @ themes:96 4themes:97 Uncaught ReferenceError: clickedStop is not defined at HTMLButtonElement.onclic どう書き直せば意図の実装ができますでしょうか

nabenabe11234

2020/10/11 16:00

全体見ないとわかりませんが、以下で試してみてください。 HTML内の <script src=random.js></script> の行をheadタグ内に移動（titleの下あたりに）

ikikikoko

2020/10/11 16:10

回答ありがとうございます。変化しませんでした＞＞エラー内容の全文は以下になります themes:97 Uncaught ReferenceError: clickedStart is not defined at HTMLButtonElement.onclick (themes:97) onclick @ themes:97 themes:98 Uncaught ReferenceError: clickedStop is not defined at HTMLButtonElement.onclick (themes:98) onclick @ themes:98

nabenabe11234

2020/10/11 16:17 編集

JSファイルのパスの指定間違えてませんか？ online_pp/app/javascript/random.js HTMLをJSと同じディレクトリに配置して1回試してみてください。

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