cara mengganti warna halaman saat kita berinteraksi dengan tombol, misalnya saat ingin mengklik tombol ok maka warna halaman akan berganti kita bisa menggunakan tag.classList.toggle("warna class"); namun untuk memahami logika penggunaan toggle ini bisa kita lihat script dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Rubah Warna</title>
</head>
<body>
<button>Click Me</button>
<script>
var isPurple = false;
document.querySelector("button").addEventListener("click", function() {
if (isPurple) {
document.body.style.background = "white";
isPurple = !isPurple;
} else {
document.body.style.background = "purple";
isPurple = !isPurple;
}
})
</script>
</body>
</html>
csetelah kita mengetahui konsep dari penggunaan toggle maka cara mengubahnya dengan toggle yakni seperti inii.
<!DOCTYPE html>
<html>
<head>
<title>Rubah Warna</title>
<style>
.biru {
background: blue;
}
</style>
</head>
<body>
<button>Click Me</button>
<script>
document.querySelector("button").addEventListener("click", function() {
document.body.classList.toggle("biru"));
</script>
</body>
</html>
<html>
<head>
<title>Rubah Warna</title>
<style>
.biru {
background: blue;
}
</style>
</head>
<body>
<button>Click Me</button>
<script>
document.querySelector("button").addEventListener("click", function() {
document.body.classList.toggle("biru"));
</script>
</body>
</html>
0 comments:
Post a Comment