Mengambil salah satu karakter dalam array

Program ini adalah sebuah script JavaScript yang menampilkan sebuah array karakter dan dua tombol untuk menampilkan karakter berikutnya atau sebelumnya dari array tersebut.

Hasil: 🪐

Array karakter tersebut disimpan dalam variabel kk3 dan berisi berbagai jenis karakter unicode seperti emoticon, simbol, dan emoji.

🪐

Pada saat halaman dimuat, script ini akan menetapkan variabel i3 ke nilai awal 0, yang akan digunakan untuk menunjukkan indeks dari karakter yang sedang ditampilkan dari array kk3.

Karakter Acak

Kemudian, script ini akan mencari elemen dengan id bb2 dan menetapkan elemen tersebut ke variabel ss2. Elemen tersebut akan digunakan untuk menampilkan karakter yang sedang ditampilkan.

Ketika tombol "Prev" atau "Next" ditekan, event listener akan memanggil fungsi yang mengubah nilai dari variabel i3 tergantung pada tombol yang ditekan dan kemudian menampilkan karakter yang sesuai dari array kk3 ke elemen ss2.

Dengan demikian, program ini memungkinkan pengguna untuk menampilkan karakter berikutnya atau sebelumnya dari array karakter dengan menekan tombol "Prev" atau "Next".

Sebagai percobaan sebelumnya, juga dibuat untuk menampilkan salah satu isi array secara acak. Juga menampilkan isi array pada urutan tertentu yang ditetapkan.
Kode yang digunakan, dibagikan di bawa.

Hasil: 🪐

---

Klik disini untuk menampilkan karakter pertama

---

Klik icon/karakter untuk menampilkan karakter berikutnya:

Hasil: 🪐

---

Klik tombol untuk menampilkan karakter berikutnya atau sebelumnya:

Hasil: 🪐

Berikut ini adalah kode yang digunakan untuk membuat program yang bisa mengambil salah satu karakter dalam array Dimulai dengan membuat button prev dan next seperti berikut ini, dan tempat untuk menampilkan karakter yang diambil dari array.

HTML :

  
<p>Klik tombol untuk menampilkan karakter berikutnya atau sebelumnya:</p>

<p>Hasil: <span id="bb2"></span></p>
<button id="prev">Prev</button>
<button id="next">Next</button>

Anda bisa menambahkan css berikut ini jika diperlukan

CSS :

  
<style>
#bb2{font-size:3em}
</style>
  

Dan inilah javascript yang menjalankan program ini.

Javascript :

  
<script>
  const kk3 = ["🪐", "💦", "💗", "💖", "💝", "💞", "💙", "🍒", "💎", "🎀", "📀", "🔍", "💫", "🌱", "🏠", "🌳", "🔎", "🏡", "🌷", "🌸", "💡", "🌺", "🌻", "🌼", "🌏", "🌿", "🍀", "🍁", "🍂", "🍃", "🐥", "🐓", "🔑", "📶", "🏆", "🌌", "🔆", "🐤"];
  let i3 = 0;

  const ss2 = document.getElementById("bb2");
  span.textContent = kk3[i3];

  document.getElementById("prev").addEventListener("click", function() {
    i3--;
    if (i3 < 0) {
      i3 = kk3.length - 1;
    }
    ss2.textContent = kk3[i3];
  });

  document.getElementById("next").addEventListener("click", function() {
    i3++;
    if (i3 === kk3.length) {
      i3 = 0;
    }
    ss2.textContent = kk3[i3];
  });
</script> 
  

Di blog yang lain, program ini, saya coba terapkan untuk memberikan karakter besar sebagai background yang berganti setiap hari atau sesuai tanggal.

["🪐", "💦", "💗", "💖", "💝", "💞", "💙", "🍒", "💎", "🎀", "📀", "🔍", "💫", "🌱", "🏠", "🌳", "🔎", "🏡", "🌷", "🌸", "💡", "🌺", "🌻", "🌼", "🌏", "🌿", "🍀", "🍁", "🍂", "🍃", "🐥", "🐓", "🔑", "📶", "🏆", "🌌", "🔆", "🐤"]