如何实现列表项随机抽取且每个条目仅展示一次的功能

实现逻辑：新增一个临时数组存储剩余未抽取的条目，每次抽取后删除对应条目，数组为空时展示结束提示并禁用抽取按钮，避免重复操作。

完整修改后的代码 #

JS代码 #

var techniques = [
    "item 1",
    "item 2",
    "item 3",
    "item 4",
    "item 5"
]
// 存储剩余未抽取的条目，不修改原数组
let remainingTechniques = [...techniques]

function newTechnique() {
    const displayEl = document.getElementById('techDisplay')
    const btnEl = document.getElementById('drawBtn')
    // 剩余条目为空时触发结束逻辑
    if (remainingTechniques.length === 0) {
        displayEl.innerHTML = 'list over'
        btnEl.disabled = true
        return
    }
    // 随机抽取
    const randomNumber = Math.floor(Math.random() * remainingTechniques.length)
    const currentItem = remainingTechniques[randomNumber]
    // 展示抽取结果
    displayEl.innerHTML = currentItem
    // 从剩余数组中删除已抽取的条目
    remainingTechniques.splice(randomNumber, 1)
}

HTML代码 #

只需要给按钮新增id属性用于禁用控制，其余逻辑不变：

<div id="techDisplay"></div>
<button id="drawBtn" onclick="newTechnique()">New Technique</button>

XML可以实现需求，但实际开发中更推荐以下更简单易维护的方案：

• 单独存储为JSON文件：把所有条目写在一个独立的data.json文件中，内容直接为条目数组格式，JS中通过fetch方法加载该文件即可，无需和业务代码耦合，修改条目时只需要更新JSON文件，适合技术人员维护。
• 单独存储为CSV文件：如果需要非技术人员参与维护条目，可以用Excel编辑CSV格式的条目列表，JS侧添加简单的CSV解析逻辑即可读取内容，上手门槛更低。
• 独立JS文件存储：如果是静态页面不想写加载逻辑，可以把条目数组单独存为data.js文件，在主业务JS之前引入页面即可，同样可以做到业务代码和数据分离。

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