如何用Button实现数组随机化并打印更新后的数组首元素？

你的代码存在三个核心问题：

1. 页面加载时自动执行了Shuffle(magicitems)，导致数组在页面打开时就被随机打乱，不符合“点击按钮才随机化”的需求
2. RandomItem仅在初始化时赋值一次，后续数组打乱后不会同步更新，所以print按钮始终获取的是初始状态的第一个元素
3. 使用document.write()会在页面加载完成后打开新窗口输出内容，而非在当前页面指定区域显示

修正后的完整代码 #

JavaScript 部分 #

// 简化数组初始化方式
const magicitems = ["hammer ", "gaunlet ", "cloak ", "chalk ", "- "];

// Fisher-Yates 洗牌算法，修改为符合规范的写法
function shuffleArray(array) {
  // 复制原数组，避免直接修改原数组（可选，若无需保留初始状态可去掉此行）
  const newArray = [...array];
  for (let i = newArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    // 解构赋值简化交换逻辑
    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
  }
  // 替换原数组内容
  magicitems.splice(0, magicitems.length, ...newArray);
}

// 打印首个元素的函数
function printFirstItem() {
  document.getElementById("demo").innerHTML = magicitems[0];
}

HTML 部分 #

<h2>random magic item</h2>

<p id="demo"></p>

<button type="button" onclick="shuffleArray(magicitems)">random</button>
<button type="button" onclick="printFirstItem()">print</button>

关键修改说明 #

• 移除自动洗牌调用：删掉原代码中页面加载时自动执行的Shuffle(magicitems)，确保数组仅在点击random按钮时才被打乱
• 动态获取首个元素：将print按钮的逻辑改为调用printFirstItem()函数，每次点击时直接获取当前magicitems数组的第一个元素，保证拿到的是最新打乱后的结果
• 替换document.write()：使用innerHTML更新指定的<p id="demo">元素内容，避免打开新窗口或覆盖页面
• 优化洗牌算法：复制原数组进行洗牌后再替换原数组内容（若不需要保留原数组初始状态，也可直接修改原数组），同时优化变量命名符合JS规范（小写开头的函数名）

内容的提问来源于stack exchange，提问作者bitzbox