クリックすると成功または成功１，成功２と出力される機能を作りたい。

「今日の運勢は」をクリックすると成功と出力される機能を作りたいです。
JavaScriptのコードを２つ作ったのですがどちらも上手くいきません。

自力ではどこに誤りがあるのか分かりません。
間違いを指摘して頂けると助かります。

JavaScript
1 "use strict";
2
3{
4  const fortune = document.getElementById("fortune");
5  
6  
7  fortune.addEventListener("click",()=>{
8    fortune.textContent = Math.floor(Math.random()*3)
9    action();
10});
11function action(){
12  const n = fortune;
13  switch(n){
14    case 0:
15    fortune.textContent = "成功";
16    break;
17    case 1:
18    fortune.textContent = "成功1";
19    break;
20    case 2:
21    fortune.textContent = "成功2";
22    break;
23  }
24
25}
26 }

JavaScript
1"use strict";
2
3{
4  const fortune = document.getElementById("fortune");
5  
6
7  fortune.addEventListener("click",()=>{
8    fortune.textContent = Math.floor(Math.random()*3)
9    switch(fortune){
10      case 0:
11      fortune.textContent = "成功";
12      break;
13      case 1:
14      fortune.textContent = "成功1";
15      break;
16      case 2:
17      fortune.textContent = "成功2";
18      break;
19    }
20   });
21
22 }

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>おみくじ</title>
8  <link rel="stylesheet" href="css/styles.css">
9</head>
10<body>
11  <div id = "fortune">今日の運勢は？</div>  
12 
13  <script src="js/main.js"></script>
14</body>
15</html>

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

回答1件

ベストアンサー

switch(fortune)これは0にも1にもなりません。コード上fortuneにはHTMLエレメントが入っています。

【Document.getElementById() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

投稿2020/02/19 14:54

kei344

総合スコア69606

退会済みユーザー

2020/02/19 15:25

ご回答ありがとうございます。コード５行目の fortune.textContent = Math.floor(Math.random()*3)　において fortune とは JavaScript の const fortune の fortune を表しているのか，html の id ="fortune" のどちらを表しているのでしょうか？

kei344

2020/02/19 15:30

「JavaScript の const fortune の fortune」が「html の id ="fortune"」への参照を保持しています。ブラウザのJavaScript はHTMLを扱うためにDOMという物を通してアクセスします。なので、「fortune」は単なる変数で、かつ、中に「DOMを通してhtml の id ="fortune"にアクセスできる物」を格納しています。

退会済みユーザー

2020/02/19 15:56

とても丁寧なご回答ありがとうございます。未熟がある故理解出来ません… もう少し考えてみます。

kei344

2020/02/19 15:58

書籍等で体系だてた学習をされてから、ご自身の課題に取り組むことをお勧めします。