Menggunakan Attribute value() untuk Elemen DOM

Dalam JavaScript, atribut value digunakan untuk mendapatkan atau mengatur nilai dari elemen input dalam DOM. Atribut ini sangat berguna ketika kita ingin mengambil data yang dimasukkan oleh pengguna atau mengubah nilai input secara dinamis.

Atribut value umumnya digunakan pada elemen-elemen input seperti:

• <input> (teks, password, checkbox, radio, dll.)
• <textarea>
• <select>

Dengan memahami cara kerja atribut value, kita bisa dengan mudah memanipulasi elemen input dalam halaman web.

Cara Menggunakan value

1. Mengambil Nilai dari Elemen Input

Kita bisa mendapatkan nilai dari input yang diisi oleh pengguna dengan cara berikut:

<input type="text" id="nama" value="John Doe">
<button onclick="getValue()">Ambil Nilai</button>
<p id="hasil"></p>

function getValue() {
    const input = document.getElementById("nama").value;
    document.getElementById("hasil").innerText = `Nama: ${input}`;
}

Ketika tombol diklik, teks dalam paragraf akan diperbarui dengan nilai input.

2. Mengubah Nilai Input Secara Dinamis

Kita juga bisa mengubah nilai input menggunakan JavaScript.

document.getElementById("nama").value = "Jane Doe";

Kode ini akan mengubah nilai input menjadi "Jane Doe".

3. Menggunakan value dalam Checkbox dan Radio Button

Pada checkbox dan radio button, value digunakan untuk menentukan nilai yang dikirimkan saat elemen dipilih.

<input type="checkbox" id="check" value="setuju"> Saya setuju
<button onclick="cekStatus()">Cek Status</button>
<p id="status"></p>

function cekStatus() {
    const checkbox = document.getElementById("check");
    document.getElementById("status").innerText = checkbox.checked ? `Pilihan: ${checkbox.value}` : "Belum dipilih";
}

Jika checkbox dicentang, teks dalam paragraf akan menampilkan nilai checkbox tersebut.

4. Menggunakan value dalam Elemen Select (Dropdown)

<select id="pilihan">
    <option value="merah">Merah</option>
    <option value="biru">Biru</option>
    <option value="hijau">Hijau</option>
</select>
<button onclick="getColor()">Ambil Warna</button>
<p id="warna"></p>

function getColor() {
    const warna = document.getElementById("pilihan").value;
    document.getElementById("warna").innerText = `Warna yang dipilih: ${warna}`;
}

Ketika pengguna memilih warna dan menekan tombol, teks dalam paragraf akan diperbarui dengan warna yang dipilih.

Kapan Menggunakan value?

✅ Jika ingin mendapatkan nilai dari elemen input, checkbox, radio button, atau dropdown.
✅ Jika ingin mengubah nilai elemen input secara dinamis.
✅ Jika ingin mengatur nilai default pada elemen input.

❌ Jika hanya ingin mengambil teks dari elemen biasa (gunakan innerText atau innerHTML).

Kesimpulan

• Atribut value digunakan untuk mendapatkan atau mengatur nilai elemen input dalam DOM.
• Bisa digunakan untuk berbagai elemen input seperti <input>, <textarea>, <select>, checkbox, dan radio button.
• value berguna dalam interaksi pengguna, seperti mengambil data yang diisi atau menetapkan nilai default.
• Jika hanya ingin mengambil teks dari elemen non-input, gunakan innerText atau innerHTML.

Dengan memahami atribut value, kita bisa membuat halaman web yang lebih interaktif dan responsif terhadap input pengguna. Yuk, langsung coba di proyekmu!