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() {&nbsp; let randomnumber = Math.floor(Math.random() * menuicon.length);&nbsp; document.getElementById("menuicon").src = menuicon[randomnumber];};根本问题是由于您声明数组的方式造成的。