【javascript】 クリックイベント click 文字色変更 文字変更 innerHTML / classList / toggle

【ゴール】

その① 文字色変化

その② 文字大きさ変化

【メリット】

■ javascript　理解度向上

【必要なもの】

■　HTML記述（ページ内容表示、文や、文字の表示）
■　CSS記述（ページの装飾、色変更等）
■　javascript記述（CSSでは実現できない動き、）

【コード】

その①文字色を変更

HTML

＊id を付与。

index.html

<button id="button">文字色が変わるよ</button>
<h2 id="text">文字色が変わるよ</h2>

CSS

＊クリックイベント後の処理

style.css

.font-color {
      color: pink;
    }

javascript

＊button id　がクリックされたらスコープ内を処理
＊toggleメソッドはクラスが存在していれば削除、なければ付与。超絶便利メソッド

script.js

const change = document.getElementById('button');

    change.addEventListener('click', () => {
     document.getElementById('text').classList.toggle('font-color');
    });

その② 文字を変更

HTML

＊その①と同じ

index.html

<button id="button">文字が変わるよ</button>
<h2 id="text">文字色が変わるよ</h2>

CSS

今回は不要

javascript

＊button id　がクリックされたらスコープ内を処理
＊innerHtmlメソッドで文字を変更

script.js

const change = document.getElementById('button');

change.addEventListener('click', () => {
  document.getElementById('text').innerHTML = '<h2>変わったね</h2>';
});

【留意点】

■アロー関数を積極的に使う。推奨の為
■javascript取得するIDを間違えないようにする
■メソッド、基本的な物を覚える。

【合わせて読みたい】

■ 【Javascript】 メソッド　まとめ　基礎基本コード　メモ
https://qiita.com/tanaka-yu3/items/2438798d159fa402b1d5

■ 【アロー関数】　javascript　() => {} 　意味　一言で、 入門　
https://qiita.com/tanaka-yu3/items/e16d51280f647aa19a58

■ドットインストールカリキュラム　javascript
https://dotinstall.com/lessons/basic_javascript_v4/50603