Vanilla Javascript Get Value Of Input

Vanilla Javascript Get Value Of Input

3 min read Jun 20, 2024
Vanilla Javascript Get Value Of Input

Cara Mendapatkan Nilai Input dengan Vanilla JavaScript

Vanilla JavaScript menyediakan berbagai cara untuk mendapatkan nilai dari input. Cara mana yang terbaik tergantung pada jenis input dan bagaimana Anda ingin menggunakan nilainya.

1. Menggunakan value Property

Cara paling umum dan mudah untuk mendapatkan nilai input adalah dengan menggunakan value property.

const inputElement = document.getElementById("myInput");
const inputValue = inputElement.value;

console.log(inputValue); // Menampilkan nilai input ke console

Contoh Penggunaan:





2. Menggunakan getAttribute

Anda juga dapat menggunakan getAttribute method untuk mendapatkan nilai input, khususnya untuk mendapatkan nilai atribut seperti value, name, id, dll.

const inputElement = document.getElementById("myInput");
const inputValue = inputElement.getAttribute("value");

console.log(inputValue); // Menampilkan nilai input ke console

Contoh Penggunaan:





3. Menggunakan Event Listener

Anda juga dapat menggunakan event listener untuk mendapatkan nilai input saat terjadi perubahan pada input, seperti saat user mengetik.

const inputElement = document.getElementById("myInput");

inputElement.addEventListener("input", function() {
  const inputValue = this.value;
  console.log(inputValue);
});

Contoh Penggunaan:



4. Perbedaan value dan getAttribute("value")

  • value property: Memberikan nilai terkini dari input, termasuk perubahan yang dibuat oleh user.
  • getAttribute("value"): Memberikan nilai atribut value yang ditetapkan di HTML.

Kesimpulan

Menggunakan Vanilla JavaScript untuk mendapatkan nilai input sangat mudah. Pilih metode yang paling sesuai dengan kebutuhan Anda dan gunakannya untuk membangun aplikasi web yang interaktif.