動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
The video could not be loaded, either because the server or network failed or because the format is not supported.
この動画には 1 件の補足情報があります。
ハートアイコンをクリックしたら数値が増えていく機能を実装するためのコードを紹介していきます。
- 挙動の確認
- JavaScriptコードの特徴
- JavaScript実装の注意点
2023年4月19日
補足情報 ハートアイコンについて
ハートアイコンはBootstrap Iconsを使って表示しています。詳しい使い方については以下のレッスンを参考にしてみてください。
・Bootstrap Icons入門 (全3回)
https://dotinstall.com/lessons/basic_bootstrap_icons
-
Q1
JavaScript のコードについて正しい記述は？
ユーザー登録（無料）をすると
無料で新規登録
ミニクイズで理解度をチェックできます
素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です
詳しくみるソースコードを閲覧するにはプレミアムプランへの登録が必要です
詳しくみる<!DOCTYPE·html>¬
·lang="ja"¬
¬
···charset="utf-8"¬
··My·Playground¬
···rel="stylesheet"·href="https://cdn.jsdelivr.net/npm
/bootstrap-icons@1.9.0/font/bootstrap-icons.css"¬
··¬
····body·{¬
······user-select:·none;¬
····}¬
····i·{¬
······color:·red;¬
······font-size:·20px;¬
······margin-right:·4px;¬
······cursor:·pointer;¬
····}¬
····i.large·{¬
······font-size:·32px;¬
····}¬
····span·{¬
······font-size:·20px;¬
······color:·#aaa;¬
····}¬
··¬
¬
¬
···class="bi·bi-heart-fill"·id="heart"¬
···id="counter"0¬
¬
··¬
····//·クリック回数を0で初期化¬
····let·n·=·0;¬
····//·ハートアイコンの要素を取得¬
····const·heart·=·document.getElementById('heart');¬
····//·カウンターの要素を取得¬
····const·counter·=·document.getElementById('counter');¬
····¬
····//·ハートアイコンをクリックしたときの処理¬
····heart.addEventListener('click',·()·=>·{¬
······//·カウンターを1増やす¬
······n++;¬
······//·カウンターが10を超えた場合、ハートを大きくする¬
······if·(n·>·10)·{¬
········heart.classList.add('large');¬
······}¬
······//·クリック回数を表示¬
······counter.textContent·=·n;¬
····});¬
··¬
¬
¶
サーバーとの接続が切断されました。ブラウザを再読込してみてください。
保存しました
ファイル構成
- index.html
ブラウザ実行環境を使ってみよう！
このレッスンでは、こちらにコードを打ち込みながら学習を進めていくことができます。
手元で実際に動作を確認しながら理解を深めていくと良いでしょう。
この機能を利用するには無料のユーザー登録が必要です。
