JavaScript随机卡牌生成器：如何展示存储的用户配对数据数组

核心问题定位 #

• 循环逻辑完全失效：doSmtElse函数内部的循环从索引0开始，第一行判断就是if (i === 0) {break;}，循环刚启动就直接终止，根本不会执行任何后续遍历操作
• 逻辑嵌套混乱：doSmtElse本来是用来处理单条配对数据的，结果函数内部又重新遍历整个dataStore数组，甚至在循环里递归调用自身，造成无意义的重复执行，完全没有实现"把单条内容展示到页面"的目标
• 缺失实际渲染动作：所有相关函数的操作只有控制台日志输出，全程没有获取页面上"下方数据框"对应的DOM节点，也没有把配对内容拼装成可见的页面元素插入到容器中——哪怕数据存储完全正确，页面上也不会出现任何展示内容
• 变量声明不规范：saveData里的newPair没有加let/const声明，会被挂载为全局变量，长期运行会引发变量污染的隐蔽bug；全局定义的dilemma、strategy变量全程没有被赋值，属于无效代码

从你附的运行console输出能确认，dataStore中的配对数据已经被正确存入，说明用户输入获取、随机卡牌抽取、数据存储这几个环节没有问题，问题全部出在数据渲染的逻辑上。

可直接参考的修正代码 #

// 全局数据存储
let dataStore = [];
// 提前绑定需要操作的DOM节点（替换成你页面上实际的元素选择器即可）
const userText = document.querySelector('#user-input');
const cardText = document.querySelector('#random-card-text');
const dataBox = document.querySelector('#data-display-box');

// 保存用户输入和卡牌的配对
function saveData() {
    const newPair = {
        dilemma: userText.value.trim(),
        strategy: cardText.innerText.trim()
    };
    dataStore.push(newPair);
    // 保存完成后触发全量渲染
    displayData();
}

// 渲染单条配对数据到页面
function renderPairItem(pair) {
    const itemEl = document.createElement('div');
    itemEl.className = 'pair-item';
    itemEl.innerHTML = `
        <p><strong>两难困境：</strong>${pair.dilemma}</p>
        <p><strong>抽取的解决方案：</strong>${pair.strategy}</p>
    `;
    return itemEl;
}

// 全量渲染所有已存储的配对
function displayData() {
    // 每次渲染前清空旧内容，避免重复插入
    dataBox.innerHTML = '';
    // 遍历所有存储的配对
    dataStore.forEach(pair => {
        dataBox.appendChild(renderPairItem(pair));
    });
}

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