Vanilla JS: Bật tắt bóng đèn

Bài đăng này đã không được cập nhật trong 2 năm

1. Yêu cầu

Yêu cầu bài toán là khi click vào button thì bật tắt bóng đèn. Thực ra là mình đã có sẵn hai ảnh bóng đèn lúc bật lúc tắt rồi, khi click thì ta chỉ việc thay đổi ảnh là xong. Đây là một trong những bài tập vanilla Javascript ở mức cơ bản giúp các bạn làm quen, chủ yếu giải thích về Javascript nên phần giao diện sẽ không phân tích nhiều. Hi vọng với bài tập này các bạn sẽ thấy thích thú khi học Javascript.

2. Giao diện HTML - CSS

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vanilla JS Project</title>
  <!-- bootstrap css 4.5.0 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
  <div class="text-center mt-5">
    <div class="mb-5">
      <img src="off.jpg" class="img-thumbnail" alt="" />
    </div>
    <button class="btn btn-primary">Bật đèn</button>
  </div>
  <script> // code Javascript </script>
</body>
</html>

3. Hướng giải quyết chính

Khi click vào button thì ta thay đổi đường dẫn bức ảnh từ

<img src="off.jpg" />

thành

<img src="on.jpg" />

4. Javascript

Step 1: Đặt biến để lưu trạng thái là đang bật hay tắt bóng đèn. Mặc định ban đầu là tắt nên ta cho statusLight = false
Step 2: Đặt biến để lưu các thẻ html mình cần, ở đây là thẻ img và thẻ button
Step 3: Khi click vào button thì thay đổi giá trị src của thẻ img từ off.jpg sang on.jpg hoặc ngược lại
Lưu lại trạng thái ẩn hay hiện để lần sau tính toán
Chuyển chữ trong button tương ứng để giúp người dùng dễ hiểu
Dưới đây là toàn bộ code JS

// step 1
let statusLight = false

// step 2
const imgElement = document.querySelector('img')
const btnElement = document.querySelector('button')

// step 3
btnElement.addEventListener('click', function() {
  imgElement.src       = statusLight ? 'off.jpg' : 'on.jpg'
  btnElement.innerText = statusLight ? 'Bật đèn' : 'Tắt đèn'
  statusLight          = !statusLight
})