Menyisipkan Javascript ke HTML dan Menampilkannya
(Bagian 4)
Cara 4
Menggunakan perintah document.getElementsByClassName(" ");
Langkah-langkahnya
Tidak saya jelaskan di sini, silahkan dicoba sendiri sebagai latihan otak-atik coding di halaman posting Blogger di bagian Tampilan HTML
Perintah ini dipakai untuk mengambil banyak elemen dalam satu kumpulan kelas, lalu menampilkannya.
Elemen pertama diberi simbol [0].
Elemen kedua diberi simbol [1].
Elemen ketiga diberi simbol [1].
Begitu seterusnya untuk elemen berikutnya.
Pemakaian angka di sini mengacu ke bilangan cacah, bukan bilangan bulat juga bukan bilangan asli.
Namun teks yang ditulis di antara kode <p class="cobalahsendiri"> dan kode </p> tidak ditampilkan, justru yang ditampilkan adalah teks di antara kode innerText = " dan kode ”;
Untuk 1 elemen
Kode selengkapnya berikut :
<p class="cobalahsendiri"></p>
<script type="text/javascript">
let elemen = document.getElementsByClassName("cobalahsendiri");
elemen[0].innerText = "Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali";
</script>
Untuk 3 elemen,
Kode selengkapnya berikut :
<p class="sendiri"></p>
<p class="sendiri"></p>
<p class="sendiri"></p>
<script>
let elemen = document.getElementsByClassName("sendiri");
elemen[0].innerText = "Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali";
elemen[1].innerText = "Semangat menulis coding";
elemen[2].innerText = "Berlatihlah hingga bisa";
</script>
Hasil tampilannya berikut:
Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali
Semangat menulis coding
Berlatihlah hingga bisa
Perhatikanlah:
Untuk teks KAU, AKU, dan IA tidak ditampilkan pada kode Javascript berikut
<p style="color: blue;" class="sendiri">AKU</p>
<p style="color: darkred;" class="sendiri">KAU</p>
<p style="color: green;" class="sendiri">IA</p>
<script type="text/javascript">
let elemen = document.getElementsByClassName("sendiri");
elemen[0].innerText = "Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali";
elemen[1].innerText = "Semangat menulis coding";
elemen[2].innerText = "Berlatihlah hingga bisa";
</script>
Yang ditampilkan di halaman postingan Blogger adalah
Belajar Javascript Permulaan Bersama Ikhsan Falihi Penyair Pinggir Kali
Semangat menulis coding
Berlatihlah hingga bisa
