 |
| operator increment (++) dan decrement (--) dalam JavaScript |
Berikut adalah contoh kasus penggunaan operator increment (++) dan decrement (--) dalam JavaScript menggunakan DOM dan CSS:
- Membuat tombol tambah dan kurang untuk mengubah nilai suatu elemen:
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-size: 16px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
margin: 10px;
}
</style>
</head>
<body>
<h1>Font Sizer</h1>
<p id="text" style="font-size: 16px">Lorem ipsum dolor sit amet.</p>
<button type="button" onclick="tambahUkuran()">+</button>
<button type="button" onclick="kurangUkuran()">-</button>
<script>
let ukuran = 16;
function tambahUkuran() {
ukuran++;
document.getElementById('text').style.fontSize = ukuran + 'px';
}
function kurangUkuran() {
ukuran--;
document.getElementById('text').style.fontSize = ukuran + 'px';
}
</script>
</body>
</html>
Di sini, kita membuat sebuah variabel `ukuran` yang menyimpan ukuran font saat ini, dan kita menggunakan operator increment (++) dan decrement (--) untuk mengubah nilainya saat tombol tambah atau kurang diklik. Kemudian, kita menggunakan DOM untuk mengubah style elemen dengan id `text` dengan mengubah properti `fontSize`.
Posting Komentar