Metode getElementsByName dalam JavaScript

getElementsByName

Digunakan untuk mengambil semua elemen menggunakan nama elementnya.

Properties

Metode getElementsByName ini mempunyai properties yaitu:

  • length
  • item

length

Digunakan untuk mengetahui berapa banyak element yang diambil menggunakan metode getElemetnsByName.

item (index)

Digunakan untuk mengambil element menggunakan indexnya, ini biasanya digunakan jika kamu ingin mengambil “value” dari elemen.


Contoh Kasus:

Saya mengisi tulisan pada kotak kosong pada gambar dibawah ini, lalu setelah saya klik tombol ganti kata maka tulisan “Selamat Datang di Website a2fahmi.com” akan berubah menjadi tulisan yang berasal dari kotak kosong.

Selamat Datang di Website a2fahmi.com

Pertanyaan:

Bagaimana cara membuatnya … ?

Jawaban:

Buatlah satu file bernama ambil_nama.html dan masukkan kode dibawah ini:

<html>
<head>
<script type=”text/javascript”>
function rubahKata()
{
var tulisan=document.getElementsByName(“tulis”).item(0).value;
document.getElementById(“kata”).innerHTML=tulisan;
}
</script>
</head>
<body>

<div id=”kata”>

Selamat Datang di Website a2fahmi.com

</div>

<input type=”text” name=”tulis”>
<input type=”button” value=”Ganti Kata” onclick=”rubahKata()”>
</body>
</html>

Keterangan:

  • onclick=”rubahKata()”, Kode ini berarti saat kita menekan tombol “Ganti Kata” maka fungsi rubahKata() dijalankan.
  • document.getElementsByName(“tulis”).item(0).value, kode ini berarti kita mengambil element yang mempunyai name “tulis” dan item(0) disini berarti kita mengakses element yang berindex 0 yaitu element pertama.
  • document.getElementById(“kata”).innerHTML=tulisan, Kode ini berarti kita mengganti isi HTML dari id “kata” menjadi nilai dari variabel tulisan.

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *