Javascript/HTML - 用 onclick 重复一个函数

Question

我是 Javascript/HTML 的初学者。所以如果我遗漏了一些明显的东西，我很抱歉。

我的任务：在我的网站上，我想显示一张图片，该图片在网站加载或刷新时始终相同。在该图片旁边，我想实现一个按钮，上面写着：“随机播放”。此按钮隐藏最初显示的第一张图片，然后显示从数组中选择的随机图片。图片更改后，“随机播放”按钮应该可以再次点击，每次点击它应该从数组中随机选择一张新图片。第一张初始图片只能在网站刷新时再次显示。

我的问题：单击“随机播放”按钮时，图片会发生变化，但按钮和我要编码的应该显示在网站上的所有其他内容也会消失。所以不可能再次点击。为了重复选择一个新的随机图像，我将我的数组放在一个函数中，该函数是通过按钮上的 oncklick 选择的（我认为我的问题就在这里）。如果我删除数组周围的这个函数，单击时按钮不会消失，但按钮不能单击多次。此问题的图片包含在此 post 的底部。我希望你能理解我的问题，并能帮助我。谢谢！

代码：

<body>
  <!-- button with functions:hide initial picture, select random picture, show random picture-->
  <button onClick="hideNumber(); shuffle(); showMeme();">Shuffle</button>
  <!--initial picture thats not random and always shown when page is loaded-->
  <div>
    <img id="number" src="images/zahl1.jpg" alt="Number">
  </div>

  <script type="text/javascript">
    function hideNumber() {
    var x = document.getElementById("number");
    if (x.style.display == "none") {
    } else {
      x.style.display = "none";
    }
  }
//function so the button should be reclickable / array filled with pictures
function shuffle(){
  var images1 = [],
  index1 = 0;
  images1[0] = "<div><img src='images/meme1.jpg' id='Meme1' style='visibility:hidden' alt='meme1'></div>";
  images1[1] = "<div><img src='images/meme2.jpg' id='Meme1' style='visibility:hidden' alt='meme2'></div>";
  images1[2] = "<div><img src='images/meme3.jpg' id='Meme1' style='visibility:hidden' alt='meme3'></div>";
  //selecting random number
  index1 = Math.floor(Math.random() * images1.length);
  //displaying random image out of array
  document.write(images1[index1]);
}
//execute function? (not sure if done right)
  shuffle();
//function to show the random picture when button is clicked
  function showMeme() {
        document.getElementById('Meme1').style.visibility='visible';
      }
  </script>
</body>

Here is a picture which shows the website when its first loaded

Second picture shows what happens the button is clicked. First picture dissapears and second random picture shows (just how it should be) but the button to generate a different random picture just dissapears

Answer 1

document.write 将替换整个页面。给你的 <div> 和初始图像一个 ID 并用它来替换这个元素的内容：

<div id="wrapper">
    <img id="number" src="images/zahl1.jpg" alt="Number">
</div>

将document.write(images1[index1]);替换为：

document.getElementById('wrapper').innerHTML = images1[index1];

请注意，您可以从图像中删除 style='visibility:hidden' 样式并取消可见性切换，因为数组中的元素是简单的字符串，此处不加载图像，当前显示的图像将被完全取代。

您可以通过简单地替换图像 src 属性而不是替换整块 HTML 来进一步改进这一点，除非您有理由做更多的事情。

Answer 2

这可能有帮助：

<body>
  <!-- button with functions:hide initial picture, select random picture, show random picture-->
  <button onClick="shuffle();">Shuffle</button>
  <!--initial picture thats not random and always shown when page is loaded-->
  <div>
    <img id="number" src="images/zahl1.jpg" alt="Number">
  </div>

  <script type="text/javascript">

//function so the button should be reclickable / array filled with pictures
function shuffle(){
  var images1 = [],
  index1 = 0;
  images1[0] = "images/meme1.jpg";
  images1[1] = "images/meme2.jpg";
  images1[2] = "images/meme3.jpg";
  //selecting random number
  index1 = Math.floor(Math.random() * images1.length);
  //displaying random image out of array
  document.getElementById("number").src = images1[index1];
}
  </script>
</body>

Javascript/HTML - 用 onclick 重复一个函数

Javascript/HTML - repeating a function with onclick

html

javascript

jquery

function

repeat