Pada kesempatan kali ini saya akan menjelaskan cara membuat dinamyc get content dengan javascript. Perlu teman-teman ketahui sebelumnya, maksud dari penjelasan disini adalah mengambil isi dari text hiperlink atau tag <a> dengan event onclick, namun pada kasus disini dimana untuk menerapkan event onclick dari masing-masing hiperlink tersebut harus menggunakan perulangan karena menggunakan DOM HTML docment getElementsByClassName() yang membutuhkan penentuan index nya dari masing-masing element hyperlink tersebut. Langsung saja untuk membuatnya teman-teman bisa ikuti tahapan yang saya berikan dibawah ini.
Berikut Tahapannya :
- Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
- Selanjutnya jika sudah ketikan seperti kode berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Membuat Dinamyc Get Content Dengan JavaScript</title>
</head>
<body>
<h3>Cara Membuat Dinamyc Get Content Dengan JavaScript</h3>
<nav class="form-group">
<a href="#" class="btn btn-sm btn-default">Home</a>
<a href="#" class="btn btn-sm btn-info">Product</a>
<a href="#" class="btn btn-sm btn-danger">Services</a>
<a href="#" class="btn btn-sm btn-danger">Contact Us</a>
</nav>
<span>you choose: <strong id="cetak"></strong></span>
</body>
</html>
<script>
var button = document.getElementsByClassName("btn"),
len = button.length,
i;
function click(){
document.getElementById("cetak").textContent = this.innerText;
}
for(i=0;i<len;i+=1){
button[i].onclick=click;
}
</script>
- Jika sudah selanjutnya simpan terlebih dahulu file index.html tersebut.
- Dan lihat hasilnya di browser kesayangan teman-teman.
Sampai disini penjelasan saya mengenai cara membuat dinamyc get content dengan javascript, semoga bermanfaat.