(Sample)
バッジとは、通知やラベルとして使用される小さな要素です。
バッジは、簡単にラベルや通知を追加するのに便利です。
<button id="incrementButton" class="btn btn-primary">
クリックしてインクリメント <span class="badge bg-warning rounded-pill">0</span>
</button>
<h2 class="mt-4">リストにバッジを使用</h2>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト1
<span class="badge bg-primary rounded-pill">0</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト2
<span class="badge bg-secondary rounded-pill">0</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト3
<span class="badge bg-success rounded-pill">0</span>
</li>
</ul><button id="incrementButton" class="btn btn-primary">: ボタン要素で、id属性とclass属性を設定しています。
<span class="badge bg-warning rounded-pill">0</span>: ボタン内にテキストとバッジを表示しています。
<h2 class="mt-4">リストにバッジを使用</h2>: 見出し2を表示し、上部にマージンを追加しています。<ul class="list-group">: Bootstrapのリストグループを定義しています。
<li class="list-group-item d-flex justify-content-between align-items-center">: リストアイテムを定義し、フレックスボックスで配置を制御しています。- 各リストアイテム内にバッジを含む
<span>要素があります。
- 各リストアイテム内にバッジを含む
<script>
document.getElementById('incrementButton').addEventListener('click', () => {
// すべての .badge 要素を取得
const badges = document.querySelectorAll('.badge');
// 各 .badge 要素の数値をインクリメント
badges.forEach(badge => {
let count = parseInt(badge.textContent, 10);
count++;
badge.textContent = count;
});
});
</script>
document.getElementById('incrementButton').addEventListener('click', () => { ... });document.getElementById('incrementButton'):idがincrementButtonのボタン要素を取得します。.addEventListener('click', () => { ... }): そのボタンに対してクリックイベントリスナーを追加します。ボタンがクリックされると、指定された関数が実行されます。
const badges = document.querySelectorAll('.badge');document.querySelectorAll('.badge'): クラス名badgeを持つすべての要素を取得し、badgesという定数に格納します。
badges.forEach(badge => { ... });badgesの各要素に対して、提供された関数を実行します。let count = parseInt(badge.textContent, 10);badge.textContentを整数に変換して、countに格納します。
count++;countを1増加させます。
badge.textContent = count;- 更新された
countの値をbadge.textContentに設定します。
- 更新された
ボタンがクリックされると、すべてのバッジの数値が1ずつ増加します。