我是 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>
Here is a picture which shows the website when its first loaded
最佳答案
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 block ，除非您有理由做更多的事情。
关于Javascript/HTML - 用 onclick 重复一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65444459/