by 
Hampir setiap interaksi web dimulai dari membaca apa yang diketik pengguna: kotak pencarian, form login, atau kalkulator. Di JavaScript, membaca isi input adalah keterampilan paling dasar sekaligus paling sering dipakai. Artikel ini membahas cara mengambil nilai input di JavaScript.
Properti value
<input type="text" id="nama">
<button onclick="tampil()">Cek</button>
<script>
function tampil() {
const nilai = document.getElementById("nama").value;
console.log(nilai);
}
</script>
Properti .value selalu mengembalikan string, meski pengguna mengetik angka.
Contoh Kasus: Kalkulator Sederhana
<script>
function jumlah() {
const a = Number(document.getElementById("a").value);
const b = Number(document.getElementById("b").value);
document.getElementById("hasil").textContent = a + b;
}
</script>
Perhatikan penggunaan Number() — tanpa itu, “5” + “3” akan menghasilkan “53” (penggabungan teks), bukan 8.
Contoh Kasus: Validasi Sebelum Kirim
<script>
const email = document.getElementById("email").value.trim();
if (email === "") {
alert("Email wajib diisi");
}
</script>
Kesalahan Umum
- Menjalankan skrip sebelum elemen dimuat — letakkan skrip di akhir
<body>. - Lupa mengubah string menjadi angka sebelum berhitung.
- Salah menulis id sehingga
getElementByIdmengembalikannull.
Kesimpulan
Gunakan .value untuk membaca isi input. Ingat hasilnya selalu string, jadi konversikan dengan Number() saat ingin menghitung, dan selalu .trim() untuk validasi.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).
