<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Giỏ Hàng Của Tôi</h1>
<label>Nhập giá tiền món đồ (VNĐ):</label>
<input type="number" id="giaTien">
<button onclick="themMonDo()">Thêm vào giỏ</button>
<h3>Danh sách giá các món:</h3>
<div id="danhSachGia"></div>
<hr>
<button onclick="tinhTong()">Tính Tổng Tiền</button>
<h2 id="tongTien">Tổng: 0 VNĐ</h2>
<button onclick="timDoDatTien()">Đánh dấu đồ đắt tiền (>500k)</button>
<script src="script.js"></script>
</body>
</html>
// Khai báo mảng chứa các mức giá
let mangGiaTien = [];
function themMonDo() {
let gia = Number(document.getElementById("giaTien").value);
// Thêm vào mảng
mangGiaTien.push(gia);
// Tạo một thẻ div mới hiển thị giá vừa nhập (Dùng class để lát nữa thao tác)
// Lưu ý: Bài này dùng innerHTML += để nối chuỗi đơn giản hóa cho học sinh
let htmlMoi = '<div class="item-gia">Món hàng: ' + gia.toLocaleString("vi-VN") + ' VNĐ</div>';
document.getElementById("danhSachGia").innerHTML += htmlMoi;
}
function tinhTong() {
let tong = 0;
// VÒNG LẶP FOR: Cộng dồn giá tiền
for (let i = 0; i < mangGiaTien.length; i++) {
tong = tong + mangGiaTien[i]; // Toán tử cộng dồn
}
// Hiển thị ra màn hình
document.getElementById("tongTien").innerHTML = "Tổng: " + tong.toLocaleString("vi-VN") + " VNĐ";
}
function timDoDatTien() {
// getElementsByClassName: Lấy tất cả các thẻ có class="item-gia"
// Kết quả trả về là một danh sách các thẻ HTML
let cacMonDo = document.getElementsByClassName("item-gia");
// Duyệt qua mảng giá tiền để kiểm tra
for (let i = 0; i < mangGiaTien.length; i++) {
// Nếu giá > 500000
if (mangGiaTien[i] > 500000) {
// Đổi style của thẻ HTML tương ứng ở vị trí i
cacMonDo[i].style.color = "white";
cacMonDo[i].style.backgroundColor = "red";
cacMonDo[i].style.fontWeight = "bold";
}
}
}