JS中变量变化时调用不同的事件答案

【问题标题】：Call different events when a variable change in JSJS中变量变化时调用不同的事件
【发布时间】：2020-05-13 15:56:00
【问题描述】：

我构建了一个小应用程序来在 iframe 中的随机图像之间切换，我希望在 10 或 20 张图像之后，用户将获得我希望他获得的图像或来源，而不是随机图像，然后返回环形。我对计数有问题，如果功能，将不胜感激。谢谢

<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 在这种情况下只是一个占位符。如果您能帮助编写脚本，我将不胜感激。
你说得对，应该是一样的。两个地方都应该是 img_main 。这是一个错字。
已修复，感谢您的耐心。
我猜你没有在下面看到我的答案...：/
对不起，我刚看到，试图理解它：）谢谢你的帮助。

标签： javascript arrays events

【解决方案1】：

我的看法...

通过简单地使用模（找到除法后的余数）
你不需要使用 iframe，img 元素就足够了。
使用IIFE。作为闭包方法

文件：“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>

【讨论】：

非常感谢，但我仍然有问题...我将其复制到 3 个文件，html、js 和 css 并且它不起作用...我做错了什么？
谢谢，工作完美，我将 JS 放在一个单独的文件中，但由于某种原因，它不起作用。再次感谢。
@Gil 这就是我所做的：stackoverflow.com/questions/39312681/…stackoverflow.com/questions/3037725/… 你也可以点击链接进行解释
再次感谢。我确实有一个小问题，一切都很好，但我想移动脚本下的按钮，它弯腰工作，这是超级有线，你知道为什么会这样吗？（它在