Mengambil nilai dari elemen HTML menggunakan Javascript
Artikel kali ini akan membahas mengenai bagaimana cara mengambil suatu nilai dari elemen HTML menggunakan Javascript.
Untuk mengambil nilai dari elemen HTML menggunakan JavaScript, kita dapat menggunakan beberapa metode tergantung pada jenis elemen dan jenis nilai yang ingin kita ambil. Berikut adalah beberapa contoh cara mengambil nilai dari berbagai jenis elemen HTML:
- Mengambil nilai dari input Teks
<!DOCTYPE html>
<html>
<head>
<title>Ambil Nilai Elemen HTML dengan Javascript</title>
</head>
<body>
<input type="text" id="nama" placeholder="Masukkan nama anda">
<button onclick="ambilNilai()">Ambil Nilai</button>
</body>
<script>
function ambilNilai() {
const namaValue = document.getElementById('nama').value;
alert('Nilai input teks: ' + namaValue);
}
</script>
</html
- Mengambil nilai dari checkbox
<!DOCTYPE html>
<html>
<head>
<title>Ambil Nilai Elemen HTML dengan Javascript</title>
</head>
<body>
<p>Apakah anda setuju dengan pernyataan berikut ? </p>
<input type="checkbox" id="check" name="setuju" Setuju/>
<label for="check">Setuju</label>
<button onclick="ambilNilai()">Ambil Nilai</button>
</body>
<script>
function ambilNilai() {
const isChecked = document.getElementById('check').checked;
alert('Anda: ' + (isChecked ? 'Setuju' : 'Tidak Setuju'));
}
</script>
</html>
- Mengambil nilai dari radio button
<!DOCTYPE html>
<html>
<head>
<title>Ambil Nilai Elemen HTML dengan Javascript</title>
</head>
<body>
<p>Jenis Kelamin </p>
<input type="radio" id="radio1" name="radioGroup" value="Laki-laki" />
<Label for="radio1"> Laki-laki </Label>
<input type="radio" id="radio2" name="radioGroup" value="Perempuan" />
<Label for="radio2"> Perempuan </Label>
<button onclick="ambilNilai()">Ambil Nilai</button>
</body>
<script>
function ambilNilai() {
const radios = document.getElementsByName('radioGroup');
let selectedValue = '';
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedValue = radios[i].value;
break;
}
}
alert('Nilai radio button yang dipilih: ' + selectedValue);
}
</script>
</html>
- Mengambil nilai dari dropdown (Select)
<!DOCTYPE html>
<html>
<head>
<title>Ambil Nilai Elemen HTML dengan Javascript</title>
</head>
<body>
<p>Pendidikan Terakhir </p>
<select id="dropdown">
<option value="SD">SD</option>
<option value="SMP">SMP</option>
<option value="SMA">SMA</option>
<option value="Diploma 1">Diploma 1</option>
<option value="Diploma 2">Diploma 2</option>
<option value="Diploma 3">Diploma 3</option>
<option value="Strata 1">Strata 1</option>
<option value="Strata 2">Strata 2</option>
<option value="Strata 3">Strata 3</option>
</select>
<button onclick="ambilNilai()">Ambil Nilai</button>
</body>
<script>
function ambilNilai() {
const dropdown = document.getElementById('dropdown');
const selectedValue = dropdown.value;
alert('Nilai dropdown yang dipilih: ' + selectedValue);
}
</script>
</html>
Demikian sedikit tutorial tentang cara mengambil nilai dari suatu elemen HTML menggunakan Javascript, semoga bisa bermanfaat bagi kalian yang baru belajar.
Tetap semangat dan tunggu tutorial menarik berikutnya.
Salam.
0 komentar:
Posting Komentar