Cara Manipulasi Nilai Atribut HTML Menggunakan Javascript - Setiap elemen html memiliki atribut yang berisi nilai tertentu antara lain
id,
class,
value,
name dsb. Mengubah atau menghilangkan nilai dari sebuah atribut dapat menggunakan
javascript. Hal ini kadang diperlukan agar website yang dikelola menjadi lebih baik. Bagi kamu yang sedang belajar pemrogaman web maka artikel ini sangat sesuai untuk menambah pengetahuan. Lalu bagaimana cara memanipulasi atribut pada html?
Cara Manipulasi Atribut Html Dengan Javascript
Disini ada dua macam cara memanipulasi atribut html yaitu menghilangkan dan mengubah atribut. Memanipulasi sebuah atribut disini berdasar atribut
"id" sebagai elemen penentu dimana sebuah objek akan dipanggil. Oke, langsung saja perhatikan dan pahami langkah berikut ini.
Menghilangkan Nilai Atribut
Menghilangkan nilai sebuah atribut dapat dilakukan dengan menggunakan syntax umum :
elementObject.removeAttribute("namaAttribute", flag);
Pada namaAttribute merujuk kepada nama atribut yang akan dihapus dan flag berisi nilai 0, 1 dan 2. Untuk keterangan nilai-nilai flag dapat dilihat pada tabel dibawah :
 |
| Tabel Flag |
Misalnya untuk membuat tag
<input
> pada form tidak bisa diisi dan ketika seseorang itu klik maka pengisian form dapat dilakukan. Perhatikan kode html berikut :
<html>
<head>
<title>Menghilangkan Nilai Atribut HTML</title>
</head>
<body>
<form>
<br>Nama<br>
<input type="text" id="name" value=""/>
<br>Password<br>
<input type="password" id="pwd" value="" readonly="true"/>
</form>
</body>
</html>
Coba jalankan script diatas pada browser dan isi form nama dan password. Apa yang terjadi? Password tidak dapat diinput karena pada tag
<input
> terdapat atribut
"readonly" yang bernilai
true.
Sekarang coba tambahkan kode berikut ini sebelum
</body> atau tepat dibawah tag
</form> :
<button onclick="removeAttr()">klik disini</button>
<script type="text/javascript">
function removeAttr(){
document.getElementById("pwd").removeAttribute("readonly",0);
alert("sukses");
}
</script>
Sehingga akan menjadi seperti ini :
<html>
<head>
<title>Menghilangkan Nilai Atribut HTML</title>
</head>
<body>
<form>
<br>Nama<br>
<input type="text" id="name" value=""/>
<br>Password<br>
<input type="password" id="pwd" value="" readonly="true"/>
</form>
<button onclick="removeAttr()">klik disini</button>
<script type="text/javascript">
function removeAttr(){
document.getElementById("pwd").removeAttribute("readonly",0);
alert("sukses");
}
</script>
</body>
</html>
Hasil setelah ditambahkan javascript :
Nah, javascript diatas akan menghilangkan nilai dari atribut
readonly dengan menambahkan nilai
flag sama dengan 0. Fungsi removeAttr()
pada javascript tersebut dipanggil di atribut
onclick pada tag
<button
> yang nantinya jika button tersebut diklik form password akan bisa diisi.
Mengubah Nilai Atribut
Untuk mengubah nilai atribut pada tag html menggunakan javascript bisa dilakukan dengan cara langsung menyisipkan atribut pada javascript dan mengisi nilainya. Penulisan syntax umum :
elementObject.attribute='nilai';
Sebagai contoh saya akan mengubah nilai dari sebuah atribut bernama
"value" dengan nilai yang sudah ditentukan. Kode html diatas sama seperti sebelumnya hanya saja saya mengganti bagian javascriptnya.
Perhatikan kode html berikut :
<html>
<head>
<title>Mengubah Nilai Atribut HTML</title>
</head>
<body>
<form>
<br>Nama<br>
<input type="text" id="name" value="Nama Anda"/>
<br>Password<br>
<input type="password" id="pwd" value="" />
</form>
<script type="text/javascript">
document.getElementById("name").value='Sudah diubah';
</script>
</body>
</html>
Coba jalankan kode html diatas, lihat form isian nama mempunyai
value 'Nama Anda'.
Kemudian tambahkan kode javasript berikut :
<script type="text/javascript">
document.getElementById("name").value='
Sudah diubah';
</script>
Lebih lengkapnya akan menjadi seperti ini :
<html>
<head>
<title>Mengubah Nilai Atribut HTML</title>
</head>
<body>
<form>
<br>Nama<br>
<input type="text" id="name" value="Nama Anda"/>
<br>Password<br>
<input type="password" id="pwd" value="" />
</form>
<script type="text/javascript">
document.getElementById("name").value='Sudah diubah';
</script>
</body>
</html>
Hasil setelah ditambahkan javascript :
Kesimpulan
Pada kode html diatas, lihat yang diberi warna merah tepatnya pada tag
<input
> dengan atribut
value yang berisi nilai '
Nama Anda' dan nilai tersebut akan diubah menjadi '
Sudah diubah' pada form pengisian nama. Dengan menggunakan syntax javascript tersebut akan memudahkan kita dalam mengubah suatu nilai dari atribut pada tag html.
Nah itulah artikel tentang
Cara Manipulasi Nilai Atribut HTML Menggunakan Javascript baik melakukan pengubahan atau menghilangkan nilai atribut pada tag html yang wajib dimengerti oleh programmer web pemula yang sedang belajar seperti saya ini. Semoga bermanfaat.
