JavaScript 学習メモ

4/16 　
#本日の学習内容

9時～　　ボタンごとに違うテキストが表示されるボタンの仕組みを理解した。

test.html

<label>アイスクリームの味:
        <select class="ice-cream" name="ice-cream">
          <option value="">1つ選択してください …</option>
          <option value="chocolate">チョコレート</option>
          <option value="sardine">イワシ</option>
          <option value="vanilla">バニラ</option>
        </select>
      </label>
      
      <div class="result"></div>

test.js

document.querySelector('.ice-cream').addEventListener('change', (event) => {
document.querySelector('.result').textContent= `You like ${event.target.value}`;

});

・ice-creamの値が変わったらイベントを起こす
・resultのテキストコンテントを'Youlike${event.target.value}'にする。
・html側で、表示したいvalueの値と、表示したいところにresultの値を設定しているところがポイント

10時～　この記事の執筆　学習サイト探索

11時～　ストップウォッチの作成
　　　　htmlはこんな感じ

test.html

<div id="timer">00:00:000</div>
    <button id="start">start</button>
    <button id="stop">stop</button>
    <button id="reset">reset</button>

jsファイルに書く内容をまとめる

・Startを押した時間から今の時間をひいて、それを表示する
・ミリ単位なので、変数を使って分、秒単位に直す

眠たくなったので、ストップウォッチは中止

14時～書籍で学習

15時～　foreach map の学習