Improved the random images code

index.html

@@ -96,7 +96,10 @@ <h2>למה הגבת ככה?</h2>
             <div class="action-container">
                 <button onclick="getReason()">קבל סיבה</button>
             </div>
-            <img class="hidden reason-img" id="reason-img" alt="">
+            <img class="none reason-img" src="images/bear.webp" alt="Dancing Bear" width="450" height="500">
+            <img class="none reason-img" src="images/bling.webp" alt="Bling Bling" width="500" height="500">
+            <img class="none reason-img" src="images/stevie.webp" alt="Stevie Wonder" width="500" height="333">
+            <img class="none reason-img" src="images/frankenstein.webp" alt="The Frankenstein" width="401" height="500">
         </section>
     </main>
 

script.js

@@ -146,36 +146,15 @@ function findTargetLang(text) {
 }
 
 function getReason() {
-  const options = [
-    {
-      alt: 'Dancing Bear',
-      src: 'images/bear.webp',
-      width: 450,
-      height: 500,
-    },
-    {
-      alt: 'Bling Bling',
-      src: 'images/bling.webp',
-      width: 500,
-      height: 500,
-    },
-    {
-      alt: 'Stevie Wonder',
-      src: 'images/stevie.webp',
-      width: 500,
-      height: 333,
-    },
-    {
-      alt: 'The Frankenstein',
-      src: 'images/frankenstein.webp',
-      width: 401,
-      height: 500,
-    },
-  ];
-  const img = document.getElementById('reason-img');
-  img.classList.remove('hidden');
-  index = randInt(0, options.length);
-  Object.entries(options[index]).forEach(([key, value]) => {
-    img.setAttribute(key, value);
-  });
+  const imgs = document.getElementsByClassName('reason-img');
+  const index = randInt(0, imgs.length);
+  let i = 0;
+  for (const img of imgs) {
+    if (i === index) {
+      img.classList.remove('none');
+    } else {
+      img.classList.add('none');
+    }
+    i++;
+  }
 }

styles.css

@@ -123,6 +123,10 @@ h1 {
   visibility: hidden;
 }
 
+.none {
+  display: none;
+}
+
 .tooltip {
   opacity: 0;
   padding: 0.5em 1em;