JavaScript: Hiển thị cảnh báo khi nhấp vào nút trong một lớp

Để làm điều này, hãy sử dụng document.getElementsByClassName(). Dưới đây là mã:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button class="clickTheButton">Nhấp vào nút để nhận cảnh báo</button>
<script>
  for (var clickButton of document.getElementsByClassName("clickTheButton"))
    clickButton.addEventListener("click", alertMeessage);
  function alertMeessage() {
    alert("Bạn đã nhấp vào nút");
  }
</script>
</body>
</html>

Để chạy chương trình trên, lưu tệp với tên "anyName.html (index.html)" và nhấp chuột phải vào tệp. Chọn tùy chọn "Open with Live Server" trong trình soạn thảo VS Code.

Kết quả

Chương trình sẽ cho ra kết quả sau:

Khi bạn nhấp vào nút, thông báo cảnh báo sẽ hiển thị. Chương trình sẽ cho ra kết quả sau: