Wajah menggunakan innerhtml queryselector

Hallo sobat program, alhamdulillah 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 kelas dengan nama yang sama yaitu contoh. Dan nantinya class ketiga 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

HTML

1

2

3

4

5

6

7

8

9

10

sebelas

12

13

14

limabelas

16

17

18

19

<div kelas = "wadah">

<h2>Menghitung Banyak Kelas CSS< / h2>

<div class = "contoh">

Lorem Ipsum adalah hanya boneka teks dari yang cetakan

< / div>

<h3 kelas = "contoh">

lama didirikan fakta bahwa a pembaca akan menjadi terganggu

< / h3>

<p kelas = "contoh">

Ada ada banyak variasi dari bagian dari Lorem Ipsum

< / p>

<tombol klik = "myFunction()" >Hitung< / tombol >

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

< / div>

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

CSS

1

. wadah {lebar. 650px; margin. 20px otomatis; latar belakang. lightgrey; pengisian. 20 piksel;}

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

JAVASCRIPT

1

2

3

4

5

6

fungsi Fungsiku() {

var x = dokumen.querySelectorAll(". contoh");

dokumen. getElementById("hasil"). innerHTML = x. panjang;

}

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 contoh class 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

querySelector untuk apa?

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Bagaimana membuat komentar di JavaScript?

Dalam JavaScript Apa yang dimaksud dengan DOM?