常連

注目の的

質問力

自己紹介

初歩的な質問ですみません。JavaScriptのプロパティについての質問です。

(例)
const iphone = {
maker : apple,
color : white,
edition : 11pro
}

のような情報をプロパティと呼ぶのはわかるんですが、ある書籍で

「document.getElementById(‘id名‘).textContent と入力するとドキュメントにそのHTMLの要素のコンテンツを読み取ることができます」

と記載されていました。
私の感覚だと、オブジェクトのメソッドは機能的な役割でプロパティは情報という認識でいました。ただこの書籍でいくとtextContentはプロパティと記載されていましたが私的に情報というより機能的な役割をしているのではないかと疑問に思っています。

アホな質問で申し訳ありません…

JavaScriptプロパティについて

#短く、簡潔なJavascriptの記述をするためにヒントをください

Javascript初心者です。
OpenWeatherMapを使用した練習サイトを作成しました。

具体的には、

- 現在の天気予報
- 翌日の3時間ごとの天気予報
- 翌々日の3時間ごとの天気予報

をAPIで取得し、作成しました。

結果的に思うようなサイトを作ることはできたのですが、Javascriptが非常に長くなってしまいました。

▽対象サイト
[https://webprogblog.xsrv.jp/demo/weather/](https://webprogblog.xsrv.jp/demo/weather/)

##個人的に省略できるんじゃないかと思うところ

翌日の６時、９時、12時、15時、18時の天気予報を取得し、それぞれの天気状態によって条件分岐をしました。

```Javascript
// 特定の時間の天気情報を取得
const nextWEather_6 = data.list[7].weather[0].main; // 翌日の6時
const nextWEather_9 = data.list[8].weather[0].main; // 翌日の9時
const nextWEather_12 = data.list[9].weather[0].main; // 翌日の12時
const nextWEather_15 = data.list[10].weather[0].main; // 翌日の15時
const nextWEather_18 = data.list[11].weather[0].main; // 翌日の18時

// 取得した天気によって「天気の画像を」を挿入
if (nextWEather_6 === "Thunderstorm") {
  document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
} else if (nextWEather_6 === "Drizzle") {
  document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
} else if (nextWEather_6 === "Rain") {
  document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
} else if (nextWEather_6 === "Snow") {
  document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
} else if (nextWEather_6 === "Atmosphere") {
  document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
} else if (nextWEather_6 === "Clear") {
  document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
} else if (nextWEather_6 === "Clouds") {
  document.getElementById('nextWEather_6').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
} else {
  return false;
}
if (nextWEather_9 === "Thunderstorm") {
  document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="雷雨">';
} else if (nextWEather_9 === "Drizzle") {
  document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="霧雨">';
} else if (nextWEather_9 === "Rain") {
  document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/rains.png" alt="雨">';
} else if (nextWEather_9 === "Snow") {
  document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/snow.png" alt="雪">';
} else if (nextWEather_9 === "Atmosphere") {
  document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="濃霧">';
} else if (nextWEather_9 === "Clear") {
  document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clear.png" alt="晴れ">';
} else if (nextWEather_9 === "Clouds") {
  document.getElementById('nextWEather_9').innerHTML = '<img src="asset/img/clouds.png" alt="曇り">';
} else {
  return false;
}

・
・
・
12時、15時、18時も同様に記述する。
翌々日も同様に。
```

ここの部分があまりにも長く、同じような処理を繰り返しているので、もっと簡単にかける気がするのですが、その術がわかりません。

どのように記述すればもっと短く簡潔に書けるかご教授いただけますでしょうか。

繰り返しとのことですので、FOR文とかを使うんじゃないかと思ってはいるのですが、正直どのように手を付けていいかわかりません……


##コード すべて

すみません、文字数OVERで載せることができなかったので、下記を参照ください。

＞[Javascript全文](https://webprogblog.xsrv.jp/demo/weather/asset/js/app.js)

短く、簡潔なJavascriptの記述をするためにヒントをください

### 前提・実現したいこと

Html,JSで出勤、退勤を確認するようなシステムを作っています。
詳しく言うと、
出勤ボタンをクリックするとtextareaに「クリックしたときの時間＋出勤」と表示され、
退勤ボタンをクリックするとtextareaに「クリックしたときの時間＋退勤」と表示される機能です。
しかし今までこのような機能を実装したことがなく実装することができません。

なお、ボタンを何度クリックしても無限にテキストが表示されるようにしたいです。
![![イメージ説明](ae8aad2fb29a40d4db746ae1b6aa4575.jpeg)説明](b6683310ca50be54caed57d315e68288.jpeg)](3984436a44dd5ee8741b85996fc8840e.jpeg)

【HTML】【JavaScript】でボタンをクリック→「クリック時の時間＋テキスト」を表示する機能が作りたい。

JavaScriptで、カウントダウンタイマーを作成しています。
わからないところが二つありましたので質問させて頂きます。

１、最後のrefreshはrecalcの{}の外でfunctionを使って記述していますが何故でしょうか。

２、何故最後の行でrecalc()を記述しなければいけないのでしょうか。

ご回答お待ちしております。宜しくお願い致します。
```JavaScript
function recalc() {

			let counter =  countdown(goal);

			const time = `${counter[0]}日${counter[1]}時間${counter[2]}分${counter[3]}秒`;
			
			document.getElementById('birthday').textContent = time;
			
			refresh();
		}

		function refresh() {
			setTimeout(recalc,1000);
		}
		
		recalc();

```

コード全体
```JavaScript	
<script>
		"use strict"

		function countdown(due){
			const now = new Date();

			const reset = due.getTime() - now.getTime();

			const sec  = Math.floor(reset/1000)%60;
			const min = Math.floor(reset/1000/60)%60;
			const hour = Math.floor(reset/1000/60/60) % 24;
			const day = Math.floor(reset / 1000 / 60/ 60 / 24);
			
			const count = [day,hour,min,sec];

			return count;
		}

		let goal = new Date(2020,12,6);
		
		function recalc() {

			let counter =  countdown(goal);

			const time = `${counter[0]}日${counter[1]}時間${counter[2]}分${counter[3]}秒`;
			
			document.getElementById('birthday').textContent = time;
			
			refresh();
		}

		function refresh() {
			setTimeout(recalc,1000);
		}
		
		recalc();
	</script>
```

JavaScriptのカウントダウンタイマーについて

こんにちは、先日progateさんを卒業し、
初めてサイトの模写をデイトラさんで配布されているものでトライしてみました。
すごく時間もかかり、コードも見ずらいし、このときのコードはこれでいいのか？と不安になり
もっともっとスマートに書けるのではないかと、出来たという達成感がまるでありません....。

ご教示よろしくお願いします。

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <div class="header-logo">
            <p>30DAYSトライアル</p>
        </div>

        <div class="header-list">
            <ul>
                <li>デイトラとは</li>
                <li>コース一覧</li>
                <li>お問い合わせ</li>
            </ul>
        </div>
    </header>

    <div class="top-img">
    </div>

    <div class="contents-wrapper">
        <h2>デイトラとは</h2>
        <div class="contents-deitora">
            <img src="about.png" alt="">
            <p>デイトラとは、無料で・迷わず・美しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。１日１個30日でプロのWebエンジニアを目指しましょう！</p>
        </div>
        <h2>コース一覧</h2>
        <ul class="contents-course">
            <li><img src="web_first.png" alt=""><p class="p-txt">HTML / CSS / Bootstrap</p></li>
            <li class="li-center"><img src="web_second.png" alt=""><p class="p-txt">HTML / CSS / JavaScript / jQuery</p></li>
            <li><img src="web_third.png" alt=""><p class="p-txt">PHP / WordPress</p></li>
        </ul>
        <h2>お問い合わせ</h2>
        <div class="contents-form">
            <p>さぁ今日から30日間を始めよう！</p>
            <input type="text" placeholder="  メールアドレス">
            <div class="form-btn">
                <a>無料ではじめる</a>
            </div>
        </div>
    </div>

    <footer>
        <p>fhhgdusjhshjfsi</p>
    </footer>

</body>
</html>
```

```CSS
header{
    margin: 0 auto;
    width: 960px;
    height: 60px;
}

.header-logo {
    float: left;
    font-weight: bold;
}

.header-list {
    float: right;
    font-weight: bold;
}

.header-list ul {
    display: flex;
    list-style: none;
}

.header-list li {
    padding: 0 15px;
}

.top-img {
    height: 450px;
    background-image: url("main-vsual.png");
    background-size: cover;
}

.contents-wrapper {
    text-align: center;
    margin: 0 auto;
    width: 960px;
}

.contents-deitora {
    display: flex;
}

.contents-deitora p {
    font-weight: bold;
}

.contents-deitora img {
    width: 50%;
    padding-right: 15px;
}

.contents-course {
    display: flex;
    padding-left: 0px;
}

.contents-course li {
    width: calc(100%/3);
    list-style: none;
}

.contents-course li  img {
    max-width:100%;
    height: auto;
}

.li-center {
    padding: 0 20px;
}

.p-txt {
    text-align: left;
    margin: 0 0;
}

.contents-form p {
    margin: 0;
}

.contents-form input {
    border: 2px solid rgb(177, 176, 176);
    padding: 5px 0;
    border-radius: 20px;
    box-shadow: none;
    width: 50%;
    height: 30px;
}

.form-btn {
    display: block;
    background-color: rgba(255, 0, 0, 0.541);
    width: 40%;
    margin: 20px auto 0 auto;
    padding: 15px 0;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

footer {
    border-top: solid 2px rgba(0, 0, 0, 0.075);
    margin: 100px auto 0 auto;
    width: 960px;
    height: 60px;
    text-align: right;
}
```
**完成の見本です**
![完成図](43093e19cfb76ceab483f34237fa5d8b.png)
**こちらが今回模写した物です。**
![模写](0c726326bce922c65d3d43537faae59b.png)

模写コードの指摘をお願いします

プログラミングの練習に、JavaScriptでタイピングゲームを制作しています。
問題のランダム表示、制限時間は問題なく動作したのですが、解答決定後の正誤判定がうまくいきません。

解答入力後、解答ボタンを押す、Enterキーを押すなどしても、正誤判定が行われず別の問題に切り替わってしまいます。




### 該当のソースコード
```HTML
<pre class="lang:js decode:true">  
    

<h1><p id="subject"></p></h1>
    <form name="myform" onsubmit="check()">
        <input mame="mytext" type="text">
        <input type="submit" value="解答"/>
    </form>
<h3><p id="timer"></p></h3>


<script>

const subject = document.getElementById('subject');
const timer = document.getElementById('timer');
const form = document.forms.typing;
const textList = [
  "いろはにほへとちりぬるを",
  "なにぬねの",
  "あいうえお",
  "あかさたな",
  "はまやらわ"
];

const rnd = Math.floor(Math.random() * textList.length);
subject.textContent = textList[rnd];
let TIME = 10;
let count = 0;
let state = true;

 
const countdown = setInterval(function() {
  timer.textContent = '制限時間：' + --TIME + '秒';
  if(TIME <= 0) finish();
}, 1000);
 

function check(){
 　if(!state) return;
 　if(document.myform.mytext.value === subject.textContent) {
    count++;
    init();
  } else {
    subject.textContent = '間違いです！';
    setTimeout(function(){ init() },1000)
  }
};

 
 
function init() {
  const rnd = Math.floor(Math.random() * textList.length);
 
  subject.textContent = textList[rnd];
  form.input.value = '';
  form.input.focus();
}
 
function finish() {
  clearInterval(countdown);
  subject.textContent = '終了！正解数は' + count + '個でした！';
  state = false;
}  

</script>
     
</pre>

```


### 試したこと

onsubmitではなく、onclickに変更し、クリックされたら判定する方式に変更するなど、判定に入るための条件も変更して試してみましたが結果は変わらず、正しく正誤判定が行われることはありませんでした。

### 補足情報（FW/ツールのバージョンなど）

VisualstudioCodeを使用しています。
このゲームは、こちらのサイト（https://www.sejuku.net/blog/92667）を参考に開発しています。

タイピングゲームの正誤判定

プログラミング学習で詰まった際の対処法について意見をください。

・悩み始めたきっかけ
→ 2つの記事をよく見かけます。
① 調べてもどうしていいか分からない時にすぐに聞いてしまうと問題解決能力がつかないと言う記事。
②分からないことがあったら直ぐに聞き解決するべきという記事。

・1番悩んでいること
①、②は正反対の考えなのでどちらにすれば良いかわからないです。ただ、たしかに直ぐにてきとうな質問をしてしまうのはどうかとは思うのですが、いつまで経っても分からず時間を浪費してしまうのもどうかと思います。

 そこで、自分なりに解決手順を考えました。下記のとうりです。⬇️


・考えた対処法の手順
①そもそもどこが問題点なのかを考え書き出す。
②場所を特定しその対処法を考える。
③一定時間は検索しながら調べる。
④思いつかない場合は相手に伝わりやすいように整理した質問文でteratailに聞く。


このように考えたのですが、プログラミング経験者の意見を聞かせていただきたいです。文章が長くなりすみません_(._.)_

プログラミング学習に詰った時の対処法

```JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    var N = 59;
    var num = 2;
    var result = true;
    while (num < N)
     {
         if (N % num == 0)
         {result = false;
            break;}
         num ++;}
        if (result){document.write(N+'は素数です');}
        else {document.write(N+'は素数ではありません');}
    </script>
</body>
</html>
```
テキストを使ってjavascriptを勉強しています。参考コードに上のようなものがありました。
whileの繰り返し構文の勉強なのですが、二点while以外で理解できない部分があります。

・参考書には、ifの条件式満たす場合、break;でwhile構文を抜けます。と書いてありましたが、このbreak;という処理は、親構文（この場合、if構文を含んでいるwhile構文）があればそれらすべてを抜けるということですか？
それとも、筆者のミスで、if構文のみ抜けて、Nが５９になるまで繰り返し、５９になったらwhileの条件（num < N)= false　となり、処理を実行せずにif(result){...へ進むのですか？結果以外のプログラムの動きが気になりました。

・条件（result)とはどういうことでしょうか。A<B　などの比較演算子を用いた条件の真偽値の判断はわかるのですが、（真ならtrue,偽ならfalse)条件が（変数）だけだとどのように真偽値を判断すればいいのか分からず、困っています。。

よろしくお願いいたします (⸝⸝⸝•﹏•⸝⸝⸝)

JavaScriptの条件とbreak;について分からないことがあります。

初歩的な問題で失礼します。
さっぱり返り値というものがわかりません。

下記２つ表示結果は一緒なのに、何がどう違うのでしょうか？
多分、分かる人には一目瞭然な違いなのでしょうが、以前も勉強した時に返り値のところで砕け散りました。。。。

何がどう違くて、なぜ返り値を使うのかご説明いただけたら幸いです。
ぜひよろしくお願いします。

```JS
function output_hello(){
   document.write("<p>hello関数:hello</p>");
}
output_hello();
```

```JS
function make_hello_name(name){
   var str = '<p>make_hello_name関数: hello ' + name + '</p>';
   return str;
}
 
var hello_name = make_hello_name('鈴木');
document.write(hello_name);

```

返り値というものがわかりません。

```javascript
<html>
    <html lang="ja">
        <head>
            <meta charset="utf-8" />
            <title>ストップウォッチ</title>
        </head>
        <body>
            <div>
                <h1>StopWatch</h1>
                <h1 id="timerLabel">00:00:00</h1>
                <input type="button" onclick="start()" value="START" id="startBtn" />
                <input type="button" onclick="stop()" value="STOP" />
                <input type="button" onclick="reset()" value="RESET" />
            </div>
            <div id="dsp"></div>
            <script>
                let status = 0;
                let time = 0;
                let startBtn = document.getElementById("startBtn");
                let timerLabel = document.getElementById("timerLabel");
                let dsp = document.getElementById("dsp");

                function start() {
                    status = 1;
                    startBtn.disabled = true;
                    dsp.innerHTML = "";
                    timer();
                }

		function stop() {
			status = 0;
			startBtn.disabled = false;

		if (timerLabel.innerHTML == "00:10:00") {
		dsp.innerHTML = 100;
		}

		else if (timerLabel.innerHTML > "00:10:00"　{
		dsp.innerHTML = "失格";
}

		else  {
		dsp.innerHTML = "00:10:00"-timer();
		}

		}               


                function reset() {
                    status = 0;
                    time = 0;
                    timerLabel.innerHTML = "00:00:00";
                    dsp.innerHTML = "";
                    startBtn.disabled = false;
                }




                function timer() {
                    if (status == 1) {
                        setTimeout(function () {
                            time++;
                            // 分・秒・ミリ秒を計算
                            let min = Math.floor(time / 100 / 60);
                            let sec = Math.floor(time / 100);
                            let mSec = time % 100;

                            if (min < 10) min = "0" + min;
                            if (sec >= 60) sec = sec % 60;
                            if (sec < 10) sec = "0" + sec;
                            if (mSec < 10) mSec = "0" + mSec;
                            timerLabel.innerHTML = min + ":" + sec + ":" + mSec;
                            timer();
                        }, 10);
                    }
                }
            </script>
        </body>
    
</html>
```
function stop()でタイマーを止めた時にぴったり00：10：00だったら100点
もし00：09：98なら00；10；00の差分の02を得点にしたいと思ってfunction stop()をいじってみましたが、計算をどうすればいいのかが思い浮かびません。
どなたかお教えください。

stop watchのゲームの結果を点数化したい

### 前提・実現したいこと
ドットインストールのスロットマシンを作ろうのレッスンを参考にしました。
そこからアレンジして、揃った絵柄ごとに取得できるコイン枚数をswitch文で分岐させたいと思っています。

getCash関数を定義して、引数にpanels[0]を渡しています。
そしてswitch文で、panels[0]の画像とimagesの配列にある画像を比較して、一致した画像に応じてコイン枚数を変えようと思っています。

### 発生している問題・エラーメッセージ
```
上記の考えで行うと、以下のようなエラーメッセージが出ます。
main.js:74 Uncaught ReferenceError: images is not defined
    at getCash (main.js:74)
    at checkResult (main.js:124)
    at keydownStop (main.js:163)
    at HTMLDocument.<anonymous> (main.js:185)
getCash @ main.js:74
checkResult @ main.js:124
keydownStop @ main.js:163
(anonymous) @ main.js:185

スロットの画像自体は表示されているので、images　は定義されていると思うのですが、何がいけないのでしょうか。

```

### 該当のソースコード
```HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Slot Machine</title>
    <link rel="stylesheet" href="css/styles.css">

  </head>
  <body>
    <main></main>
    <div id="spin">SPIN</div>
    <div id="div"></div>
    <script src="js/main.js"></script>
  </body>
</html>
```
```CSS
body{
  background:#bdc3c7;
  font-size:16px;
  font-weight:bold;
  font-family:Arial,sans-serif;
}

main{
  width:300px;
  background:#ecf0f1;
  padding:20px;
  border:4px solid #fff;
  border-radius:12px;
  margin:16px auto;
  display:flex;
  justify-content:space-between;
}

.panel img{
  width:90px;
  height:110px;
  margin-bottom:4px;
 
}

.stop{
  cursor:pointer;
  width:90px;
  height:32px;
  background:#ef454a;
  box-shadow:0 4px 0 #d1483d;
  border-radius:16px;
  line-height:32px;
  text-align:center;
  font-size:14px;
  color:#fff;
  user-select:none;

}

#spin{
  cursor:pointer;
  width:280px;
  height:36px;
  background:#3498db;
  box-shadow:0 4px 0 #2880b9;
  border-radius:18px;
  line-height:36px;
  text-align:center;
  color:#fff;
  user-select:none;
  margin:0 auto;

}

.unmatched{
  opacity:0.5;
}

.inactive{
  opacity:0.5;
}

.coins{
  width:280px;
  height:36px;
  background:#ecf0f1;
  border-radius: 4px;
  border:4px solid #fff;
  margin:20px auto;
  text-align:center;
}
```

```javascript
'use strict';

{
 class Panel{
   constructor(){
     const section = document.createElement('section');
     section.classList.add('panel');

     this.img = document.createElement('img');
     this.img.src = this.getRandomImage();

     this.timeoutId = undefined;

     this.stop = document.createElement('div');
     this.stop.textContent = 'STOP';
     this.stop.classList.add('stop','inactive');
     
     section.appendChild(this.img);
     section.appendChild(this.stop);

     const main = document.querySelector('main');
     main.appendChild(section);
     
    }
    
    images = [
      '../JS slot.html/bell.jpg', //5
      '../JS slot.html/banana.jpg',//10
      '../JS slot.html/cherry.jpg',//30
      '../JS slot.html/grape.jpg', //50
      '../JS slot.html/bar.jpg',   //100
      '../JS slot.html/piero.jpg', //300
      '../JS slot.html/seven.jpg', //500
    ];
    
    
    
    getRandomImage(){
     return this.images[Math.floor(Math.random() * this.images.length)];
   }

  spin(){
     this.img.src = this.getRandomImage();
     this.timeoutId = setTimeout(()=>{
       this.spin();
     },1000);
    
   }
   

   isUnmatched(p1,p2){
     return this.img.src !== p1.img.src && this.img.src !== p2.img.src;
   }

   isMatched(p1,p2){
     return this.img.src == p1.img.src && this.img.src == p2.img.src;
   }

   unmatch(){
     this.img.classList.add('unmatched');
   }

   activate(){
     this.img.classList.remove('unmatched');
     this.stop.classList.remove('inactive');
    }
  
 };

function getCash(p0){
  
    switch(p0){
      
      case images[0]:
        cash += 5;
        coins.textContent = `コイン枚数：${cash}`;
        break;
       
      case  images[1]:  
        cash += 10;
        coins.textContent = `コイン枚数：${cash}`;
        break;
     
      case  images[2]:
        cash += 30;
        coins.textContent = `コイン枚数：${cash}`;
        break;
       
      case  images[3]:
         cash += 50;
         coins.textContent = `コイン枚数：${cash}`;
         break;
         
      case  images[4]:
        cash += 100;
        coins.textContent = `コイン枚数：${cash}`;
        break;

      case  images[5]:
        cash += 300;
        coins.textContent = `コイン枚数：${cash}`;
        break;
       
      case  images[6]:
        cash += 500;
        coins.textContent = `コイン枚数：${cash}`;
        break;
       
      }
  };

    function checkResult(){

    if(panels[0].isUnmatched(panels[1],panels[2])){
      panels[0].unmatch();
    }
    if(panels[1].isUnmatched(panels[0],panels[2])){
      panels[1].unmatch();
    }
    if(panels[2].isUnmatched(panels[0],panels[1])){
      panels[2].unmatch();
    }
    if(panels[0].isMatched(panels[1],panels[2])){
      getCash(panels[0]);
    }
    };


 let cash = 10;
  let coins = document.getElementById('div');
  coins.textContent = `コイン枚数：${cash}`;
  coins.classList.add('coins');
  
  function haveCash(){
      cash--;
      coins.textContent = `コイン枚数：${cash}`;
  };
  
  function keydownSpin(){ 
    spin.classList.add('inactive');
    panels.forEach(panel => {
      panel.activate();
      panel.spin();
    });
  };

  let panelsLeft = 3;
  
  
  function keydownStop(i){ 
    if(i.stop.classList.contains('inactive')){
      return;
    };
    i.stop.classList.add('inactive');
    clearTimeout(i.timeoutId);

    panelsLeft --;

    if(panelsLeft === 0){
      spin.classList.remove('inactive');
      panelsLeft = 3;
      checkResult(panels[0],panels[1],panels[2]);
     
    };
  };

 const panels = [
   new Panel(),
   new Panel(),
   new Panel(),
 ];

 const spin = document.getElementById('spin');

document.addEventListener('keydown',(e)=>{

  switch(e.keyCode){

    case 100:
      keydownStop(panels[0]);
      break;

    case 101:
      keydownStop(panels[1]);
      break;

    case 102:
      keydownStop(panels[2]);
      break;

    case 96:
      if(cash == 0 || spin.classList.contains('inactive')){
        return;
      }else{
        keydownSpin();
        haveCash();
      }
       break;
  };

});
  
};
 
```

### 試したこと

1)getCash関数をPanelクラス内で定義したら、今度はgetCashが定義されていないことになった。
Uncaught ReferenceError: getCash is not defined
    at checkResult (main.js:166)
    at keydownStop (main.js:205)
    at HTMLDocument.<anonymous> (main.js:223)
checkResult @ main.js:166
keydownStop @ main.js:205
(anonymous) @ main.js:223

2)imagesをPanelクラス外で、新たに定義した。
エラーメッセージは出ないが、コインを取得できなかった(getCash関数が動いてない？)



### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

JavaScript スロットマシンでコインを取得したい

### 前提・実現したいこと
javascript初心者です。

簡単なtodolistを作成したくて作成した順にidを割り当てて値と同時に出力したいです。しかし思うように動かなかったので質問しました。

### 発生している問題・エラーメッセージ
出力結果:入力した値+undefind
が出力されてしまいます。

自分は「id+入力した値」を出力結果としてだしたいです。何がおかしいのかわからないので教えていただけないでしょうか？


### 該当のソースコード

```html
<body>
  <h1>todo list</h1>
  <div>
    <input type="text" id="item">
    <button type="button" id='click-function'>Add</button>
  </div>
  <ul id="todoList"></ul>
  <script src="index.js"></script>
</body>
```

```js
const myfunc = document.getElementById('click-function');
myfunc.addEventListener('click',function(){
    let todoItems = [];
    let todoItem = document.getElementById('item').value;
    todoItems.push(todoItem);
    todoItems.forEach((value,index,array) => {
        let li = document.createElement('li');
        li.textContent = todoItems[index] + todoItems[value];
        document.getElementById('todoList').appendChild(li);
    })
        
})

```

jsの配列の挙動が理解できない

```JavaScript
<!DOCTYPE html>
<html lang="ja">
<head> 
<title>おみくじ</title>
<style>
body{
background-color:lightblue;
} 
p{
text-align:center;
font-size:2em;
margin-top:100px;
}
</style> 
</head>
<body> 
<script>
//　大吉・吉・中吉・小吉・末吉・凶・大凶
let kujis =["大吉","吉","吉","吉","中吉","中吉","小吉","小吉","小吉","末吉","末吉","凶","凶","大凶"];
//console.log(kujis[0]);
let kuji = Math.floor(Math.random()*kujis.length);
　　　 
//console.log(kuji);
document.write("<p>あなたの今年の運勢は"+kujis[kuji]+"です</p>")

document.cookie = 'name=太郎' + encodeURIComponent('outlet shoes');


</script> 
</body>
</html>

``` 
このようにしましたが、Chromeのcookieに何も表示されません。
記述のどこかに誤りがあるでしょうか？　よろしくお願いします。

おみくじを1回しか引けないようにしたい

### onclickが実行された際、メソッドから引数を受け取りたい

JavaScriptでマルバツゲームを作っています。
実行ブラウザはGoogle Chromeです。
盤面がクリックされた際、マスに○印を描写する機能の実装中にエラーが発生しました。
コメントアウトされたハイフンで囲った箇所が該当箇所と思われます。

### 発生している問題・エラーメッセージ

```
index.js:22 Uncaught TypeError: Cannot set property 'textContent' of null
    at HTMLTableCellElement.onClicked (index.js:22)
```

### 該当のソースコード

```JavaScript

function initializeGame() {

  var boardTable = document.getElementById("boardTable");

  for (var i = 0; i < 3; i++) {
    var tr = document.createElement("tr");

    for (var j = 0; j < 3; j++) {
      var td = document.createElement("td");
      td.className = "cell";
      td.id = "cell" + i + '-' + j;

//------------------------------------------------------------
      td.onclick = onClicked;
      tr.appendChild(td);
    }
    boardTable.appendChild(tr);
  }
}

function onClicked(e) {
  var clickedCellId = e.target.id;
  document.getElementById("clickedCellId").textContent = "○";
}
//------------------------------------------------------------


```

### 試したこと

デバッグしてみたところ、メソッドonClickedの仮引数(e)に何も引数が渡されてないのかもしれないと思いました。

onclickというイベントが実行された際に、仕組みとして自動（？）でeventオブジェクトという実引数が、onclickプロパティにセットされたメソッドの仮引数に渡される認識だったのですが、この認識は間違っていますか？

どのようなコードにすれば改善されるか、教えて頂けると幸いです。
よろしくお願いいたします。

### 補足情報（FW/ツールのバージョンなど）

Google Chrome

JavaScriptでonclickが実行された際、メソッドから引数を受け取りたい

**javascriptでtodo list**を作っています。
**消去ボタンを押したら項目を削除した**いのですがうまく行かず困っています。
もう二日もこの問題が解決できなくて心が折れそうです。

初心者で恐縮ですがわかるかたがいたらお願いいたします。

```html

<body>
	<h1>Shopping List</h1>
	<p id="first">Get it done today</p>
	<input id="userinput" type="text" placeholder="enter items">
	<button id="enter">Enter</button>
	<ul>
		<li class="bold red" random="23">Notebook 	<button class="del">delete</button></li>
		<li>Jello 	<button class="del">delete</button></li>
		<li>Spinach 	<button class="del">delete</button></li>
		<li>Rice 	<button class="del">delete</button></li>
		<li>Birthday Cake 	<button class="del">delete</button></li>
		<li>Candles 	<button class="del">delete</button></li>
		
	</ul>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
```

```js

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

function inputLength() {
	return input.value.length;
}

function createListElement() {
	var li = document.createElement("li");
	li.appendChild(document.createTextNode(input.value));
	ul.appendChild(li);
	input.value = ""; 
}

function addListAfterClick() {
	if (inputLength() > 0) {
		createListElement();
	}
}

function addListAfterKeypress(event) {
	if (inputLength() > 0 && event.keyCode === 13) {
		createListElement();
	}
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

//ここから不明//
var delB = document.getElementsByClassName("del")//⇦ボタンを取得//

 delB.addEventListener(click',delItem);//⇦ボタンを押したら消去する//

 function removeParent(e){　//⇦消去するファンクション//
	e.target.parentNode.remove();
} 
 delB.addEventListener("click",removeParent);//⇦実行//
```

Javascript　To Do リスト　の項目の削除について

### 前提・実現したいこと

カウントダウンタイマーを作成しています。

ファイル名: timer.html

カウントは03:00からスタートする
スタートボタンを押すと1秒ずつカウントが進む
カウントが00:00になったら「Time UP!」と表示する
ストップボタンを押すとカウントが止まる
リセットボタンを押すとカウントが03:00に戻り、カウントが止まる内容です。

現在3秒からスタートして１秒ずつカウントを進められましたが、これ以降が出来ませんでした、、
どのように追加したらよいでしょうか？

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイマー</title>
    <link rel="stylesheet" href="timer.css">
    
  <script>
  var counter;
  var time = 180
function countStart( ){
              counter = setInterval(count, 1000);
              }

function countStop( ){
              clearInterval(counter);
               }


function countreset( ){
              var min= document.getElementById('min');
              var sec= document.getElementById('sec');
              time = 180
              sec.innerHTML = time % 60;
              min.innerHTML = '0'+Math.floor(time / 60);
              clearInterval(counter);
               }

/*カウントが終わったらtime up!と表示させて色を変える関数*/
function count( ) {
        var min= document.getElementById('min');
        var sec= document.getElementById('sec');
        if( time === 0) {      
                       clearInterval(counter);
                 } else {
                       time -= 1;
                        sec.innerHTML = time % 60;
                        min.innerHTML = Math.floor(time /60);
                 }
                }
                        
         window.onload = function(){
            var timerlavel= document.getElementById('timerLavel');
            var start = document.getElementById('start_button');
            var stop = document.getElementById('stop_button');
            var reset = document.getElementById('reset_button');
            start.addEventListener('click',countStart,false);
            stop.addEventListener('click',countStop,false);
            reset.addEventListener('click',countReset,false);
        }
 
 </script>
</head>
  <body>
    <div class="container">
       <h1 class="title">Stop watch</h1>
       <h1 id="timerLavel"><span id ="min">00</span>:<span id ="sec">00</span></h1>
      <div class="set">
        <button id="start_button">スタート</button>
        <button id="stop_button">ストップ</button>
        <button id="reset_button">リセット</button>
      </div>
   </div>
  </body>
</html>




```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Java scriptでのタイマー作成について

### 配列にテストの点数を入れて最低得点を表示したい

点数集計の問題を説いているのですが問題には５人の生徒の最高得点、最低得点、平均点を表示してくださいと書いてあって最高得点、平均点は表示できたのですが最低得点を表示しようとしても0点と表示されてしまいます。最高得点を出したときと同じようにコードを書いてみたのですが表示されません。

### 発生している問題・エラーメッセージ
最低得点を表示しようとしても「最低得点は0点でさんです」と表示されてしまう。

```
### 該当のソースコード
var students = ["山田", "高橋", "田中", "鈴木", "吉田"];

var totalScore = 0;
var maxScore = 0;
var maxPersonName = "";
var miniScore = 0;
var miniPersonName = "";
var scoreArray = [];

for (let i = 0; i < students.length; i++) {
  var score = parseInt(prompt(students[i] + "さんの点数"));
  scoreArray.push(score);

  totalScore = totalScore + score;

  if (score > maxScore) {
    maxScore = score;
    maxPersonName = students[i];
  }
  if (score < miniScore) {
    miniScore = score;
    miniPersonName = students[i];
  }
}

alert("平均点は" + (totalScore / students.length) + "点です");
alert("最高得点は" + maxScore + "点で" + maxPersonName + "さんです");
alert("最低得点は" + miniScore + "点で" + miniPersonName + "さんです");

```

### 試したこと
最高得点のコードを書いた時と同じように比較の記号を反対にして一番低い点数がminiScoreに入るようにした。
よろしくお願いします。

5人のテストの得点から最低値の算出

こんにちは。
星の出力練習を通してJavaScriptの書き方を練習しています。

現在、以下のような星の羅列をしたいのですが、書き方に行き詰まったので質問いたしました。

★☆★☆★
☆★☆★☆
★☆★☆★
☆★☆★☆
★☆★☆★

上記の形に寄せるため、以下のようなコードを書きました。

　　　　　<script>
		for(var i=1; i<6; i++){
		for(var a=1; a<6; a++){
		if(a % 2 == 1)
		{document.write("★");}
		else{document.write("☆")};
		};
		document.write("<br>");
		};
	</script>

これだと、下記のようになります。

★☆★☆★
★☆★☆★
★☆★☆★
★☆★☆★
★☆★☆★

そこで、変数i=2,4（または偶数指定）のときに、変数a=奇数のときの処理を書けばいいのかな？
と思ってfor文とif文のネストを試行錯誤しましたが、エラーがでました。
条件式の間違いも含めて、アドバイスをいただけますと幸いです。
よろしくお願いします。

JavaScriptを使用した星の出力練習

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
javascriptについて質問です。
ボタンをクリックして、1.画像をランダムで表示させる　2.カウントが100ずつ増えていく機能を作りたいです。また、これらを1つの画面で完成させたいと思っています。
1と2のそれぞれの機能は動作できましたが、2つ同時に機能させることができません。
イメージといたしまして、家事をして0円貯金しましたという言葉と貯金するボタンを最初の画面に表示します。
ボタンをクリックすると、0円の文字が100円に変わり、家事をして100円貯金しましたの言葉とボタンの間に画像を表示させたいです。
さらに、ボタンをクリックすることで、200円、300円と金額が増え、画像もクリックするたびにランダムに表示させたいです。
また、画面を閉じても金額は0円に戻らず、クリックして増えた金額を保存して、次に画面を開いたら、増えた金額からスタートできるようにしたいです。
わかりにくい説明ですが、改善点を教えていただけると助かります。
宜しくお願いいたします。

※style.cssのソースコードを記載していなかったので追加で載せています。

### 該当のソースコード

```ここに言語名を入力
[index.html]
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title>クリックアプリ</title>
    <script type="text/javascript">
      var Count = 0;
      function CountUp() {
        document.getElementById("Output").innerHTML = Count+=100;
      }
      function getImage() {
        var image=new
        Array("image1.jpg","image2.jpg","image3.jpg");
        var randomNum=(Math.floor(Math.random()*3));
        document.write("<img src="+image[randomNum]+">");
      }
      
    </script>
</head>
<body>
    <p>家事をして<br><span id="Output">0</span>円<br>貯金しました</p>
    <input type="button" value="貯金する"  onclick="CountUp(); getImage()">
  </div>
</body>
</html>
  
[style.css]
body {
  background-color: #F0F8FF;
  padding: 15px;
  font-size: 30px;
  color: #666;
}
input {
  background-color: #FFFF00;
  font-size: 40px;
  color: 	#000000;
  position: absolute;
	left: 70px;
	bottom: 100px;
}
img {
  position: absolute;
  left: 150px;
  bottom: 100;
}
```

### 試したこと
できるかな？と思った形で試してみましたが駄目でした。
[script]
 function getImage() {
        document.getElementById("OutPut").innerHTML = ("<imgsrc="+image[randomNum]+">");
        var image=new
        Array("image1.jpg","image2.jpg","image3.jpg");
        var randomNum=(Math.floor(Math.random()*3));
      }
[body]
    <p>家事をして<br><span id="Output">0</span>円<br>貯金しました</p>
    <p><span id="OutPut"></span></p>
    <input type="button" value="貯金する"  onclick="CountUp(); getImage()">

[script]
function getImage() {
        document.getElementById("output").innerHTML = document.write("<img src="+image[randomNum]+">");
        var image=new
        Array("image1.jpg","image2.jpg","image3.jpg");
        var randomNum=(Math.floor(Math.random()*3));
      }
[head]
    <p>家事をして<br><span id="Output">0</span>円<br>貯金しました</p>
    <input type="button" value="貯金する"  onclick="CountUp(); getImage()">

### 補足情報（FW/ツールのバージョンなど）
monacaを使用しています。

javaScript　ボタンをクリックしたとき、画像をランダムで表示し同時に100ずつカウントを増やすプログラム

### 前提・実現したいこと

[こちら](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)のページでストップウォッチを作成しています。
時間を計算する部分で、"1%60"のような剰余の計算が出てくるのですが、なぜ割れない数字が余りの値を返すかわかりません？一体どのような計算が行われいるのでしょうか？
以下のコードのMath.floorの後ろの部分です。
なぜこのような計算をすると時間/分数/秒数が求められるのでしょうか？

### 該当のソースコード

```Javascript
// Define a counter variable for the number of seconds and set it to zero.
let secondCount = 0;

// Define a global to store the interval when it is active.
let stopWatch;

// Store a reference to the display paragraph in a variable
const displayPara = document.querySelector('.clock');

// Function to calculate the current hours, minutes, and seconds, and display the count
function displayCount() {
  // Calculate current hours, minutes, and seconds
  let hours = Math.floor(secondCount / 3600);
  let minutes = Math.floor((secondCount % 3600) / 60);
  let seconds = Math.floor(secondCount % 60)

  // Display a leading zero if the values are less than ten
  let displayHours = (hours < 10) ? '0' + hours : hours;
  let displayMinutes = (minutes < 10) ? '0' + minutes : minutes;
  let displaySeconds = (seconds < 10) ? '0' + seconds : seconds;

  // Write the current stopwatch display time into the display paragraph
  displayPara.textContent = displayHours + ':' + displayMinutes + ':' + displaySeconds;

  // Increment the second counter by one
  secondCount++;
}

// Store references to the buttons in constants
const startBtn = document.querySelector('.start');
const stopBtn = document.querySelector('.stop');
const resetBtn = document.querySelector('.reset');

// When the start button is pressed, start running displayCount() once per second using displayInterval()
startBtn.addEventListener('click', () => {
  stopWatch = setInterval(displayCount, 1000);
  startBtn.disabled = true;
});

// When the stop button is pressed, clear the interval to stop the count.
stopBtn.addEventListener('click', () => {
  clearInterval(stopWatch);
  startBtn.disabled = false;
});

// When the reset button is pressed, set the counter back to zero, then immediately update the display
resetBtn.addEventListener('click', () => {
  secondCount = 0;
  displayCount();
});

// Run displayCount() once as soon as the page loads so the clock is displayed
displayCount();
```

### 試したこと

たとえば、secondCountの値が1なら、1割る60の余りが1になるということですよね？
60割る3600の余りを60で割ると1になるってことですよね？
これがさっぱりわからないのです。
僕の認識では、1は60では割れないので余りは出ずに0になる。と思うんですが、%の扱いについて何か認識違いをしているのかもしれません。

%演算子のページも読みましたが、明確な答えは得られませんでした。

加えてこの計算が理解できたとして、何故このような計算をすると時間/分数/秒数が求められるのかもよくわかりません。
ご教授のほど、よろしくお願いします。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。