JavaScript随机测验生成器：判断输入答案是否属于答案数组的代码实现

完全明白你的需求了！下面是完整的HTML+JavaScript实现代码，包含你要的所有逻辑，我会把关键部分给你解释清楚：

1. HTML结构 #

先搭好页面的基础元素：题目展示区、答案输入框、提交按钮，还有用来显示提示的区域。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>随机测验生成器</title>
    <style>
        .correct { color: green; font-weight: bold; }
        .wrong { color: red; font-weight: bold; }
    </style>
</head>
<body>
    <h2>随机测验</h2>
    <div id="questionArea">题目加载中...</div>
    <input type="text" id="answerInput" placeholder="请输入你的答案">
    <button id="submitBtn">提交答案</button>
    <div id="feedbackArea"></div>

    <script>
        // JavaScript代码写在这里
    </script>
</body>
</html>

2. JavaScript核心逻辑 #

接下来实现随机出题和答案判断的功能：

// 定义题目数组和答案数组
const questionsArray = [
    "请说出一种编程语言？",
    "请说出一种前端框架？",
    "请说出一种数据库？",
    "请说出一种操作系统？"
];

const answersArray = [
    "JavaScript", "Python", "Java",
    "React", "Vue", "Angular",
    "MySQL", "MongoDB", "PostgreSQL",
    "Windows", "Linux", "MacOS"
];

// 页面加载时随机展示题目
window.onload = function() {
    showRandomQuestion();
};

// 随机展示题目的函数
function showRandomQuestion() {
    const randomIndex = Math.floor(Math.random() * questionsArray.length);
    document.getElementById("questionArea").textContent = questionsArray[randomIndex];
    // 每次出题清空之前的提示和输入框
    document.getElementById("feedbackArea").textContent = "";
    document.getElementById("answerInput").value = "";
}

// 提交按钮的点击事件处理
document.getElementById("submitBtn").addEventListener("click", function() {
    const userAnswer = document.getElementById("answerInput").value.trim();
    const feedbackArea = document.getElementById("feedbackArea");

    // 判断用户输入的答案是否在答案数组中
    if (answersArray.includes(userAnswer)) {
        // 答案存在，显示正确提示
        feedbackArea.textContent = "回答正确！";
        feedbackArea.className = "correct";
    } else {
        // 答案不存在，显示错误提示
        feedbackArea.textContent = "回答错误，请重新输入！";
        feedbackArea.className = "wrong";
    }
});

// 额外：支持按回车键提交答案
document.getElementById("answerInput").addEventListener("keypress", function(e) {
    if (e.key === "Enter") {
        document.getElementById("submitBtn").click();
    }
});

关键逻辑说明 #

• 随机出题：用Math.random()生成0到1的随机数，乘以题目数组长度后取整，得到随机索引，以此获取随机题目。页面加载和刷新时都会自动调用这个函数。
• 答案判断：使用数组的includes()方法，直接检查用户输入的答案是否存在于answersArray中，完全符合你要求的“只要答案在数组里就提示正确，不管是否匹配当前题目”的逻辑。
• 用户体验优化：每次出题会清空输入框和之前的提示，还支持按回车键提交答案，操作更顺畅。

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