動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>My Playground</title>
<style>
table {
border-collapse: collapse;
}
th {
font-weight: normal;
background: #eee;
}
th,
td {
padding: 4px;
border: 1px solid;
}
th:nth-child(1) {
width: 180px;
}
th:nth-child(2) {
width: 180px;
}
td:nth-child(2) {
text-align: right;
}
tr:last-child {
font-weight: bold;
}
input[type="checkbox"] {
margin-right: 8px;
}
</style>
</head>
<body>
<table>
<thead>
<tr><th>商品名</th><th>価格</th></tr>
</thead>
<tbody id="items">
<tr><td>合計 (送料込)</td><td><span id="total">0</span>円</td></tr>
</tbody>
</table>
<p>
※ 税込価格、送料350円は5,000円以上で無料
</p>
<script>
// 合計金額を0で初期化
let total = 0;
// 送料を定義するための変数
let shipping;
// HTMLからitemsというIDを持つテーブル要素を取得
const table = document.getElementById('items');
// HTMLからtotalというIDを持つspan要素を取得
const totalSpan = document.getElementById('total');
// 商品データを格納した配列
const items = [
{name: 'Tシャツ', price: 1200},
{name: 'カットシャツ', price: 4200},
{name: 'チノパン', price: 3800},
{name: '靴下', price: 800},
];
// すべての商品データに対して処理を行う
items.forEach((item) => {
// 新しいtr要素を作成
const tr = document.createElement('tr');
// 新しいtd要素を作成
const nameTd = document.createElement('td');
// 商品名のテキストを作成
const nameText = document.createTextNode(item.name);
// チェックボックスを作成
const checkbox = document.createElement('input');
// チェックボックスのタイプを設定
checkbox.type = "checkbox";
// チェックボックスがチェックされたときの処理
checkbox.addEventListener('change', () => {
// チェックされている場合、合計金額を加算
if (checkbox.checked) {
total += Number(item.price);
} else {
// チェックされていない場合、合計金額から減算
total -= Number(item.price);
}
// 合計金額が5000以上または0の場合、送料は0
if (total >= 5000 || total === 0) {
shipping = 0;
} else {
// それ以外の場合、送料は350
shipping = 350;
}
// 合計金額と送料を加算し、totalSpanに表示
totalSpan.textContent = (total + shipping).toLocaleString();
});
// 新しいtd要素を作成
const priceTd = document.createElement('td');
// 価格をテキストとしてtd要素に追加
priceTd.textContent = item.price.toLocaleString() + '円';
// td要素にチェックボックスと商品名を追加
nameTd.appendChild(checkbox);
nameTd.appendChild(nameText);
// tr要素に商品名のtd要素と価格のtd要素を追加
tr.appendChild(nameTd);
tr.appendChild(priceTd);
// tr要素をテーブルの最後の行の前に挿入
table.insertBefore(tr, table.rows[table.rows.length - 1]);
});
</script>
</body>
</html>
サーバーとの接続が切断されました。ブラウザを再読込してみてください。
保存しました
ファイル構成
- index.html
ブラウザ実行環境を使ってみよう！
このレッスンでは、こちらにコードを打ち込みながら学習を進めていくことができます。
手元で実際に動作を確認しながら理解を深めていくと良いでしょう。
この機能を利用するには無料のユーザー登録が必要です。
