Sự kiện thay đổi kích hoạt khi một phần tử thay đổi. Bạn cần sử dụng cú pháp dưới đây.
onchange="yourFunctionName(this);"
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>
<p>
<label for="color">Choose Color</label> <input type="color" id="selectedColor"
value="#985d5d" onchange="showValue(this);" />
</p>
<script>
function showValue(c){
console.log(c.value);
}
</script>
</body>
</html> Để chạy chương trình trên, hãy lưu tên tệp anyName.html (index.html) và nhấp chuột phải vào tệp và chọn tùy chọn mở bằng máy chủ trực tiếp trong trình chỉnh sửa mã VS.
Đầu ra
Sau khi nhấp vào màu loại đầu vào, bạn sẽ nhận được giá trị màu trong bảng điều khiển -
