如何为随机生成的加法题正确显示对应答案？

你的问题出在没有在每一次循环中同步计算并绑定当前题目的答案——要么ans变量没有在循环内重新赋值，要么赋值后没有和当前生成的题目关联起来，导致显示的是其他题的答案（或者未初始化的值）。

直接修改循环逻辑，在每次生成题目时同步计算答案，并将题目和答案一起插入到DOM中即可，以下是修正后的代码：

function createWorksheet1() {
    var totalQuestions = 10;
    var difficulty = 1000;
    
    // 提前获取DOM元素，避免循环内重复查询（优化性能）
    var column1 = document.getElementById('column1');
    column1.innerHTML = ''; // 清空原有内容，避免重复生成
    
    // column1 easy
    for (var i = 0; i < totalQuestions; i++) {
        var firstNumber = Math.round(Math.random() * difficulty + 100);
        var secondNumber = Math.round(Math.random() * difficulty + 100);
        // 每次循环计算当前题目的答案
        var ans = firstNumber + secondNumber;
        // 将题目和对应答案一起插入，格式可按需调整
        column1.innerHTML += `${firstNumber} + ${secondNumber} = <strong>${ans}</strong><br><br><br>`;
    }
}

关键修改点： #

• 把ans的声明和计算移到循环内部，确保每次循环都计算当前题目的答案，而不是复用旧值
• 提前获取column1元素并清空原有内容，避免多次调用getElementById影响性能，同时防止重复生成题目
• 直接将题目和答案拼接后插入，保证每道题和自己的答案一一对应

如果需要隐藏答案（比如让用户做完再查看），可以用CSS隐藏答案，点击按钮再显示，示例如下：

function createWorksheet1() {
    var totalQuestions = 10;
    var difficulty = 1000;
    var column1 = document.getElementById('column1');
    column1.innerHTML = '';
    
    for (var i = 0; i < totalQuestions; i++) {
        var firstNumber = Math.round(Math.random() * difficulty + 100);
        var secondNumber = Math.round(Math.random() * difficulty + 100);
        var ans = firstNumber + secondNumber;
        // 用span包裹答案并添加类名，通过CSS隐藏
        column1.innerHTML += `${firstNumber} + ${secondNumber} = <span class="answer">${ans}</span><br><br><br>`;
    }
}

// 显示所有答案的函数
function showAnswers() {
    var answers = document.querySelectorAll('.answer');
    answers.forEach(ans => ans.style.display = 'inline');
}

对应的CSS：

.answer {
    display: none;
    color: green;
    font-weight: bold;
}

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