Javascript HTML 在导航栏中显示随机图像

Question

对于移动视图，我为导航栏菜单图标切换按钮制作了不同的图像。我已将图像放入数组中，并用于Math.Random随机选择图像，但我不确定如何在 HTML 中链接它，以便每次加载页面时，它都会为导航栏图标选择一个随机图像。目前我已将其设置为 HTML 中的一张图像。也不能 100% 确定我是否正确编写了数组/随机图像的 JS 代码？<div class="topnav" id="myTopnav">  <a href="home.html" >NAME</a>  <ul>    <li style="list-style-type: none;" class="nav-link"><a id="work" href="work.html">WORK</a></li>    <li style="list-style-type: none;" class="nav-link"><a href="contact.html">CONTACT</a></li>  </ul>  <a href="javascript:void(0);" class="icon" onclick="myFunction()">    <img id="menuicon" src="img/menuiconcherry.png"></i>  </a></div>我的导航栏切换的 JS：function myFunction() {  var x = document.getElementById("myTopnav");  if (x.className === "topnav") {    x.className += " responsive";  } else {    x.className = "topnav";  }}JS随机图像：window.onload = randommenuicon;let menuicon = new Array ["img/menuiconwatermelon.png", "img/menuiconorange.png", "img/menuiconpineapple.png", "img/menuiconbanana.png", "img/menuiconfig.png", "img/menuiconstrawberry.png", "img/menuiconcherry.png"];function randommenuicon() {let randomnumber = Math.floor(Math.random() * menuicon.length);// let randommenuicon = menuicon[randomnumber];document.getElementById("menuicon").src = menuicon[randomnumber]; }

Answer 1

将您的 JS 更改为以下内容：

let menuicon = ["img/menuiconwatermelon.png", "img/menuiconorange.png", "img/menuiconpineapple.png", "img/menuiconbanana.png", "img/menuiconfig.png", "img/menuiconstrawberry.png", "img/menuiconcherry.png"];

window.onload = function() {

  let randomnumber = Math.floor(Math.random() * menuicon.length);

  document.getElementById("menuicon").src = menuicon[randomnumber];

};

根本问题是由于您声明数组的方式造成的。