Call different events when a variable change in JS

Question

I build a small application to switch between random images in an iframe, I would like that after 10 or 20 images the user will get an image or source I want him to get and not a random one, and then return to the loop. I have a problem with the count and if function, will appreciate any help. Thanks

<body>
  <iframe id="img_main" src="https://www.example.com/img_4.jpg" width="600" height="800" frameborder="1" scrolling="no"></iframe>
  <br>
<button id="H" type="button" onclick=(newImg(),clickCounter(),changeImg())>images</button>
<div id="result"></div>

<script>
function newImg(){
var myArray = [
  "img_1.jpg",
  "img_2.jpg",
  "img_3.jpg",
  "img_4.jpg"
    ];
var imgNew = "https://example.com/"
var randomItem = myArray[Math.floor(Math.random()*myArray.length)];
document.getElementById("img_main").src = "https://example.com/" + randomItem ;
}

function clickCounter() {
if (typeof(Storage) !== "undefined") {
  if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount)+1;
  } else {
    localStorage.clickcount = 1;
  }

  function changeImg(){
    if (localStorage.clickcount = 10,20) {
      document.getElementById("ins_main").src = "https://example.com/pre_defined_img.jpg";
    }
  }
</script>
</body>

img.com is just a place holder in this case. if you can help with the script I'll highly appreciate it. — Gil, May 13 '20 at 17:26
you are correct it should be the same. it should be img_main in both places. it was a typo. — Gil, May 13 '20 at 18:01
Sorry, I just saw it, trying to understand it :) Thanks for the help. — Gil, May 14 '20 at 12:41

Mister Jojo · Accepted Answer · 2020-05-21T13:48:43.570

0

the way I see that...

by simply use of the modulo (finds the remainder after division)
you don't need to use an iframe, img element is enough.
use an IIFE. as closure method

file : "myScript.js"

const imgBox = (function()
  {
  const refURL  = 'https://i.picsum.photos/id/'
    ,   imgName = [ '251/300/500.jpg', '252/300/500.jpg', '253/300/500.jpg', '254/300/500.jpg'
                  , '255/300/500.jpg', '256/300/500.jpg', '257/300/500.jpg', '258/300/500.jpg'
                  , '259/300/500.jpg', '260/300/500.jpg', '261/300/500.jpg', '146/300/500.jpg'
                  , '263/300/500.jpg', '264/300/500.jpg', '265/300/500.jpg', '266/300/500.jpg'
                  , '267/300/500.jpg', '268/300/500.jpg', '269/300/500.jpg', '270/300/500.jpg'
                  , '271/300/500.jpg', '272/300/500.jpg', '273/300/500.jpg', '274/300/500.jpg'
                  ]
    ,   imgZero = '250/300/500.jpg' 
    ,   imgSiz  = imgName.length
    ,   imgMain = document.getElementById('img-main')
    ;
  var imgNum = 0, randomI = 0;

  const obj =
    { setNext()
      { 
      if (!(++imgNum % 10)) // each 10 times
        {
        imgMain.src = refURL + imgZero
        }
      else
        {
        randomI = Math.floor(Math.random() * imgSiz)
        imgMain.src = refURL + imgName[randomI]
        }
      return imgNum 
      }
    }
  return obj
})()

const btImg    = document.getElementById('bt-img')
  ,   imgCount = document.getElementById('img-count')
  ,   banner   = document.getElementById('my-banner')
  ;
btImg.onclick =evt=>
  {
  let counter = imgBox.setNext()

  imgCount.textContent = counter

  if (!(counter %50))  // each 50 times..
    {
    changeBanner()
    }
  }

  //  changing banner function...
function changeBanner()
  {
  //.....
  // do what ever you want to change your banner
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    img#img-main {
      width:  300px;
      height: 500px;
      border: 1px solid grey;
      padding: 2px;
    }
  </style>
</head>
<body>
  <img id="img-main" src="https://i.picsum.photos/id/250/300/500.jpg" alt="" >
  <p id="img-count">0</p>
  <button id="bt-img">Image change</button>

  <div id="my-banner">the banner</div>

<script src="myScript.js"></script>
</body>
</html>

edited May 21 '20 at 13:48

answered May 13 '20 at 22:28

Mister Jojo

20,093
6
21
40

Thanks so much, but I still have a problem... I copy this to 3 files, html, js, and css And it's not working... what am I doing wrong? – Gil May 14 '20 at 14:47
THANKS, working perfectly, I placed the JS in a separate file and for some reason, it didn't work. Thanks again. – Gil May 14 '20 at 16:36
@Gil this is what I do: https://stackoverflow.com/questions/39312681/where-is-the-ideal-place-to-load-javascripts-in-html/39312790#39312790 https://stackoverflow.com/questions/3037725/is-it-wrong-to-place-the-script-tag-after-the-body-tag/3037769#3037769 you can also follow links for explanations – Mister Jojo May 14 '20 at 17:19
Thanks again. I do have a small question everything is working great, but I wanted to move the button under the script and it stooped working, which is super wired, do you know why it happened? (it's in side the before the – Gil May 14 '20 at 19:53
@Gil I changed my answer to place the button under the image part :) (and show you a complete html) – Mister Jojo May 14 '20 at 21:19
Thanks again for the help. I'm using the code and its great. I wanted to add another condition for the same imgNum and I just can do it. The idea I'm trying to do is to change a class name from none to block It's a banner (image) that I want to start as hidden and when the count (imgNun) reaches 20 then it will change the class from none to block. the code I wrote is: const banner = { showBanner() { imgCount.textContent = ++imgNum if (!(imgNum = 50)) { document.getElementByClass('banner')= "display: block;" } Please advise – Gil May 19 '20 at 16:23
Hi, thanks for the help. I want both conditions to work. every 10 clicks to show an image and after 50 clicks to show another banner (not the same) Thanks – Gil May 20 '20 at 14:14
did you had time to check my last comment, thanks for the help. – Gil May 21 '20 at 13:18
adding a `changeBanner()` function – Mister Jojo May 21 '20 at 13:48

Call different events when a variable change in JS

1 Answers1