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

https://viblo.asia/p/vanilla-js-bat-tat-bong-den-QpmlejrV5rd

by trung ken

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="text-center mt-1">
  <div class="mb-2">
    <img class="img-thumbnail" src="https://images.viblo.asia/04a233f9-901a-45cf-acfe-9ba1a8db89db.jpg">
  </div>
  <button class="btn btn-primary">Bật đèn</button>
  <p class="text-muted mt-2">
    (click vào button để thay đổi trạng thái của bóng đèn)
  </p>
</div>

JavaScript

let statusLight = false

const imgLightOn = 'https://images.viblo.asia/39110057-fb16-47f4-b9aa-2da7c2d44935.jpg'

const imgLightOff = 'https://images.viblo.asia/04a233f9-901a-45cf-acfe-9ba1a8db89db.jpg'

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

btnElement.addEventListener('click', function() {
  imgElement.src = statusLight ? imgLightOff : imgLightOn
  btnElement.innerText = statusLight ? 'Bật đèn' : 'Tắt đèn'
  statusLight = !statusLight
})