Menghitung diskon sederhana dengan kode HTML, tetapi hasil perhitungan sebenarnya harus dilakukan dengan JavaScript, yang akan memanipulasi elemen HTML untuk menampilkan hasil perhitungan diskon secara dinamis. html
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Diskon</title>
</head>
<body>
<h2>Kalkulator Diskon</h2>
<label for="harga">Harga Awal:</label>
<input type="number" id="harga" name="harga"><br><br>
<label for="diskon">Diskon (%):</label>
<input type="number" id="diskon" name="diskon"><br><br>
<button onclick="hitungDiskon()">Hitung Diskon</button>
<p id="hasil"></p>
<script>
function hitungDiskon() {
var hargaAwal = parseFloat(document.getElementById('harga').value);
var diskonPersen = parseFloat(document.getElementById('diskon').value);
if (isNaN(hargaAwal) || isNaN(diskonPersen)) {
document.getElementById('hasil').innerHTML = "Mohon masukkan angka yang valid.";
return;
}
// Menghitung jumlah diskon
var jumlahDiskon = (diskonPersen / 100) * hargaAwal;
// Menghitung harga akhir
var hargaAkhir = hargaAwal - jumlahDiskon;
// Menampilkan hasil
document.getElementById('hasil').innerHTML =
"Jumlah Diskon: Rp " + jumlahDiskon.toFixed(2) + "<br>" +
"Harga Akhir: Rp " + hargaAkhir.toFixed(2);
}
</script>
</body>
</html>
Penjelasan Kode:
HTML:Dua input (<input>) digunakan untuk memasukkan harga awal dan persentase diskon.
JavaScript:
Fungsi hitungDiskon() dipanggil saat tombol diklik.
parseFloat() digunakan untuk mengambil nilai dari input dan mengubahnya menjadi angka.
Rumus diskon:
jumlahDiskon = (diskonPersen / 100) * hargaAwal.
hargaAkhir = hargaAwal - jumlahDiskon.
Hasil perhitungan ditampilkan pada elemen <p> dengan id="hasil".
toFixed(2) digunakan untuk memformat hasil agar memiliki dua angka di belakang koma, seperti mata uang.
0 Komentar
Silahkan Isi Komentar dibawah ini