Pada bagian ini, kita akan membuat fungsi utama kalkulator menggunakan JavaScript. Dengan fungsi ini, tombol-tombol yang sudah dibuat sebelumnya akan bisa digunakan untuk melakukan perhitungan.
Langkah-langkah
- Buat file
index.htmlseperti sebelumnya. - Tambahkan kode
<script>di bagian bawahbody. - Tulis fungsi JavaScript untuk menampilkan angka, melakukan operasi, dan menghitung hasil.
Contoh Kode JavaScript
<script>
function appendNumber(number) {
document.getElementById("result").value += number;
}
function clearResult() {
document.getElementById("result").value = "";
}
function deleteLast() {
var result = document.getElementById("result").value;
document.getElementById("result").value = result.slice(0, -1);
}
function calculateResult() {
var result = document.getElementById("result").value;
try {
document.getElementById("result").value = eval(result);
} catch (e) {
document.getElementById("result").value = "Error";
}
}
</script>
Dengan kode di atas, setiap tombol angka dan operator yang ditekan akan muncul di layar kalkulator. Tombol C akan menghapus semua input, tombol < akan menghapus satu karakter terakhir, dan tombol = akan menghitung hasilnya.
📖 Kesimpulan
Pada Part 4, kita telah menambahkan fungsi JavaScript yang membuat kalkulator bisa digunakan. Selanjutnya, di Part 5 kita akan melakukan penambahan header dan footer agar kalkulator lebih menarik
👉 Lanjut ke Part 5: Mempercantik Tampilan Web Kalkulator dengan Header dan Footer