error itu kayak teman kita waktu ngoding, pasti ada error dan wajar sekali ada error.. mesin tidak bisa menolerir kesalahan penulisan, tidak seprti manusia yang bisa tolerasi kesalahan bahasa kecil. maka error perlu kita lihat untuk tau salahnya dan kita bisa koreksi. bagaimana mengetahui error kita di program? karena kita menggunakan browser maka silahkan mencari bagaimana cara masuk ke "element inspect" pada setiap browser.
ini adalah element inspect di Safari
dan ini adalah element inspect di google chrome.
contoh misalkan code sebelumnya saya salahkan, lihat code ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input proses output </title>
</head>
<body>
<h1>Program INPUT PROSES OUTPUT </h1>
<label for="panjang">Panjang</label>
<input id="panjang">
<br><br>
<label for="lebar">Lebar</label>
<input id="lebar">
<br><br>
<button id="btnHitung">hitung</button>
<br><br>
<label for="luas">Luas</label>
<input id="luas">
</body>
</html>
<script>
document.getElementById('btnHitung').onclick = function(){
let panjang = parseFloat(document.getElementById("panjang").value);
let lebar = parseFloat(document.getElementById("lebar").value);
let luas = panjang * lebar;
document.getElementById("luas").value = Luas;
}
</script>
apa yang salah? coba kita run, masukkan nilai panjang dan lebar dan tekan button hitung. apa yang terjadi? seharusnya tidak ada.
bagaiamna cara tau errornya? masuk ke inspect element, kemudian cari tab 'console'
perhatikan dibagian bawah (setelah kita masuk tab 'console' kita akan menemukan tulisan ReferenceError: Can't find variable Luas? apa yang salah, ternyata yang tulisan yang betul adalah 'luas' bukan 'Luas', jadi JS ini case sensitif, yang berarti harus sama persis besar kecil setiap huruf. jika kita betulkan hurufnya, maka error tidak ada muncul lagi dan program akan berjalan dengan baik.
maka akan terdapat error, bahkan sebelum kita melakukan aktifitas button
apa errornya? null is not object? error ini berarti HTML tidak dapat membaca blok program itu, dikarenakan tidak menemukan object atau variable yang tepat. ini terjadi karena? coba perhatikan terdapat kata (evaluating 'document.getElementById .......
disana yang kita panggil adalah 'tmbHitung' sedangkan kita deklarasi id button adalah 'btnHitung', karena terjadi salah kata maka HTML bingung mana yang object yang harus dipanggil, kan gak ada? solusi kita harus menyamakan.
ketika kita ketemu error, jangan panik, buka inspect element -> console. lihat error dan mengerti errornya dan perbaiki. semakin kita tau banyak error semakin kita akan cepat belajar.