我是 Javascript/HTML 的初学者。所以，如果我遗漏了一些明显的东西，我很抱歉。
我的任务：在我的网站上我想显示一张图片，当网站加载或刷新时该图片始终相同。在该图片旁边，我想实现一个按钮，上面写着：“随机播放”。此按钮隐藏最初显示的第一张图片，然后显示从数组中选择的随机图片。图片更改后，“随机播放”按钮应该可以再次单击，并且每次单击它都应该从数组中随机选择一张新图片。第一个初始图片仅应在刷新网站时再次显示。
我的问题：当单击“随机播放”按钮时，图片会发生变化，但按钮和我编写的应在网站上显示的其他所有内容也会消失。所以不可能再次点击。为了重复选择新的随机图像，我将数组放入一个函数中，该函数通过按钮上的 oncklick 进行选择（我认为我的问题就在这里）。如果我删除数组周围的此函数，则单击该按钮时不会消失，但该按钮不能多次单击。此问题的图片包含在本文的底部。我希望您能理解我的问题并且能够帮助我。谢谢！
代码：
<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>
第二张图显示了单击按钮时发生的情况。第一张图片消失，第二张随机图片显示（应该是这样），但生成不同随机图片的按钮消失了
慕哥9229398
繁星淼淼
相关分类
