Cara Memanfaatkan Fungsi querySelectorAll dan length pada Javascript

Hallo sobat program, alhamdulilah masih bertemu lagi dengan saya Rizal dan masih tetap diwebsite dumetschool. Dikesempatan pada hari ini saya akan mencoba dua fungsi dari javascript dan untuk judul artikel kali ini adalah Cara Memanfaatkan Fungsi querySelectorAll dan length pada Javascript.

Sebelum kita mencoba memanfaatkan kedua fungsi tsb, saya harap teman-teman sudah mengenal dari fungsi querySelectorAll dan fungsi length pada javascript. Untuk teman-teman yang belum mengenal fungsi querySelectorAll silahkan dilihat dulu artikel saya sebelumnya yang membahas tentang Cara Menggunakan Fungsi querySelectorAll pada Javascript.

Cara Memanfaatkan Fungsi querySelectorAll dan length pada Javascript

Oke lanjut kepembahasan, dipembahasan ini nantinya kita akan membuat tiga buah class dengan nama yang sama yaitu contoh. Dan nantinya ketiga class tsb kita pilih menggunakan fungsi querySelectorAll lalu kita hitung berapa banyak class tsb digunakan dengan menggunakan fungsi length.

Cara Memanfaatkan Fungsi querySelectorAll dan length pada Javascript

Oke baiklah mari kita lakukan, pertama-tama jalankan/run text-editornya lalu kemudian ketiklah kode HTML nya seperti pada contoh dibawah ini :

<div class="container">
	<h2>Menghitung Banyak Class CSS</h2>

	<div class="contoh">
		Lorem Ipsum is simply dummy text of the printing
	</div>

	<h3 class="contoh">
		long established fact that a reader will be distracted
	</h3>

	<p class="contoh">
		There are many variations of passages of Lorem Ipsum
	</p>

	<button onclick="myFunction()">Hitung</button>

	<p id="hasil"></p>
</div>

Jika sudah, langkah selanjutnya tambahkan sedikit CSS seperti pada contoh dibawah ini :

.container {width: 650px; margin:20px auto; background: lightgrey; padding:20px;}

Langkah terakhir, teman-teman tambahkan kode Javascript beserta fungsinya seperti pada contoh dibawah ini :

<script>
function myFunction() {
    var x = document.querySelectorAll(".contoh");
    document.getElementById("hasil").innerHTML = x.length;
}
</script>

Jika sudah, silahkan disimpan lalu dijalankan dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan menjadi seperti pada contoh gambar dibawah ini :

Jadi hasil diatas adalah banyaknya class contoh yang digunakan sebanyak tiga (3) hehehe. Jadi seperti itu lah contoh sederhana dari pembahasan kita kali ini tentang Cara Memanfaatkan Fungsi querySelectorAll dan length pada Javascript. Dan Silahkan teman-teman coba explore lagi ya.

Oke cukup sekian dari pembahasan kita kali ini semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Cara Memanfaatkan Fungsi querySelectorAll dan length pada Javascript

Kategori