Vanilla JS: Light switch

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 class="img-thumbnail" src="off.jpg">
    </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() {
  if (statusLight) {
    // Đèn đang bật
    // Tắt đèn đi, chuyển chữ thành bật đèn
    imgElement.src = 'off.jpg'
    btnElement.innerText = 'Bật đèn'
    statusLight = false
  } else {
    // Đèn đang tắt
    // Bật đèn lên, chuyển chữ thành tắt đèn
    imgElement.src = 'on.jpg'
    btnElement.innerText = 'Tắt đèn'
    statusLight = true
  }
})

5. Yêu cầu nâng cao

Bài này cũng khá dễ không có yêu cầu gì cao siêu, các bạn có thể tự viết lại code để quen code Javascript nhé.


Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo!


All Rights Reserved