如何将用户输入存入数组并通过Math.random抽取带随机姓名的随机问题且移除已用项

你原来的代码有这几个核心问题：

• 存储姓名的navne数组定义在函数内部，每次触发函数都会重置，无法保留之前输入的姓名
• HTML里Add word按钮绑定的addWord函数没有定义，反而把存入姓名的逻辑写在了生成问题的函数里，逻辑完全错位
• 没有做输入非空校验，会把空值存入数组
• 没有实现「姓名使用后从数组移除」的逻辑

修正后HTML代码 #

<!-- 输入姓名区域 -->
<div>
  输入姓名：<input id="userinput" />
  <button onclick="addWord()">添加姓名</button>
</div>
<!-- 已添加姓名展示 -->
<div>已添加的姓名列表：<span id="words"></span></div>
<div id="error" style="color: red;"></div>
<!-- 生成问题按钮 -->
<button onclick="myFunction()">生成随机问题</button>

修正后JS代码 #

// 把姓名数组提到全局，避免每次调用函数重置
const navne = []
// 固定问题模板，不用每次生成问题都重复定义
const spørgsmål = [
  '干了你的酒，${randomNavn}',
  '喝2杯，${randomNavn}',
  '给在场2个人敬酒，${randomNavn}'
]

// 专门处理添加姓名的逻辑
function addWord() {
  const inputElement = document.getElementById("userinput")
  const name = inputElement.value.trim()
  // 非空校验
  if (!name) {
    document.getElementById('error').innerText = '请输入有效姓名'
    return
  }
  document.getElementById('error').innerText = ''
  // 存入数组
  navne.push(name)
  // 清空输入框
  inputElement.value = ""
  // 更新已添加姓名展示
  document.getElementById('words').innerText = navne.join('、')
}

// 生成随机问题的逻辑
function myFunction() {
  // 先判断数组有没有姓名
  if (navne.length === 0) {
    alert('请先添加至少一个姓名')
    return
  }
  // 随机抽下标，方便后续移除
  const randomNameIndex = Math.floor(Math.random() * navne.length)
  const randomNavn = navne[randomNameIndex]
  // 移除已经使用的姓名
  navne.splice(randomNameIndex, 1)
  // 更新姓名列表展示
  document.getElementById('words').innerText = navne.join('、')
  // 随机抽问题模板
  const randomQuesTemplate = spørgsmål[Math.floor(Math.random() * spørgsmål.length)]
  // 拼接姓名生成最终问题
  const finalQuestion = randomQuesTemplate.replace('${randomNavn}', randomNavn)
  alert(finalQuestion)
}

实现逻辑说明：

• 添加姓名时会做非空校验，同时实时展示已添加的所有姓名
• 每次生成问题会随机抽一个未使用过的姓名，用完直接从数组删除，不会重复抽到
• 所有姓名用完后会提示需要添加新的姓名，直接添加后就能继续生成问题

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