Fungsi parseFloat(document.getElementById(...).value) dalam JavaScript

 Panggilan fungsi parseFloat(document.getElementById(...).value) dalam JavaScript digunakan untuk mengambil nilai dari elemen HTML (seperti kotak input teks) dan mengubah nilai string tersebut menjadi angka desimal (floating-point).

---

🛠️ Penjelasan Fungsi

Gabungan ini melibatkan tiga bagian penting:

1. document.getElementById('id_elemen')

• Tujuan: Untuk menemukan dan mengakses elemen HTML di halaman berdasarkan atribut id-nya.

• Contoh: Jika Anda memiliki <input type="text" id="nilai_input">, maka document.getElementById('nilai_input') akan mengembalikan objek elemen input tersebut.

2. .value

• Tujuan: Untuk mengambil nilai (konten) saat ini dari elemen HTML yang telah ditemukan.

• Penting: Untuk elemen formulir seperti <input type="text">, properti .value akan selalu mengembalikan data dalam bentuk string, bahkan jika isinya terlihat seperti angka.

3. parseFloat(string_nilai)

• Tujuan: Fungsi global JavaScript ini mengambil string sebagai argumen dan mencoba mengurai/mengubahnya menjadi angka floating-point (desimal).

• Cara Kerja:

  • Ia akan memproses string dari awal hingga menemukan karakter yang bukan merupakan bagian dari bilangan (angka, titik desimal, tanda minus, atau notasi eksponensial).

  • Karakter spasi di awal akan diabaikan.

  • Jika karakter pertama bukan angka, ia akan mengembalikan NaN (Not a Number).

• Contoh:

  • parseFloat("3.14") $\rightarrow$ 3.14 (number)

  • parseFloat("123.45px") $\rightarrow$ 123.45 (number)

  • parseFloat("BukanAngka") $\rightarrow$ NaN

---

🎯 Kegunaan Umum

Fungsi gabungan ini paling sering digunakan ketika Anda perlu melakukan perhitungan matematika dengan data yang dimasukkan oleh pengguna melalui kolom input teks HTML, karena data dari kolom input selalu berupa string.

Skenario: Menghitung jumlah dari dua kotak input.

JavaScript

let input1 = document.getElementById('kotakA').value;  // Hasilnya STRING, misalnya "5.5"










let input2 = document.getElementById('kotakB').value;  // Hasilnya STRING, misalnya "2.5"

// Jika dijumlahkan tanpa parseFloat, hasilnya adalah penggabungan string:
// console.log(input1 + input2); // Output: "5.52.5" (salah untuk penjumlahan)

// Menggunakan parseFloat untuk mengubah string menjadi angka:
let angkaA = parseFloat(input1); // 5.5 (number)
let angkaB = parseFloat(input2); // 2.5 (number)

// console.log(angkaA + angkaB); // Output: 8 (benar untuk penjumlahan)