如何实现输入答案后反馈对错的验证按钮功能？

嘿，你的思路没问题，但代码里有几个小细节出错了，导致功能没法正常跑起来。我帮你梳理修正一下，顺便把每个关键点讲清楚：

先说说你代码里的问题 #

1. HTML里多了一个多余的</button>闭合标签，得删掉
2. JS里变量名和函数名重名了（都是SbnAnswer），这会导致逻辑冲突
3. 获取输入值的时机不对——你现在是页面刚加载就获取输入框内容，那时候用户还没输入呢
4. 条件判断写法错误：if (answer === "a map" || "map")这种写法永远会判定为true，因为非空字符串是“真值”，正确的写法得两边都做相等判断
5. 转小写的方法调用错了，没指定要转的对象

修正后的完整方案（推荐简洁版） #

我把结果显示合并成了一个<p>元素，这样不用来回切换显示隐藏，更简洁直观：

HTML 代码 #

<p>I have mountains - but no rocks, forest - but no trees, river - but no water. I'm here to help you. What am I?</p>
<input type="text" id="answer">
<button id="checkAnswerBtn" type="button">Answer</button>
<p id="result"></p>

JavaScript 代码 #

// 给按钮绑定点击事件
document.getElementById('checkAnswerBtn').addEventListener('click', function() {
    // 获取用户输入的内容，去除前后空格并转成小写（支持不区分大小写验证）
    const userAnswer = document.getElementById('answer').value.trim().toLowerCase();
    // 获取结果显示的元素
    const resultElement = document.getElementById('result');

    // 验证答案
    if (userAnswer === 'map' || userAnswer === 'a map') {
        resultElement.textContent = "Congratulations, you answered right!";
        resultElement.style.color = 'green'; // 可选：给正确提示加绿色样式
    } else {
        resultElement.textContent = "Your answer is wrong.";
        resultElement.style.color = 'red'; // 可选：给错误提示加红色样式
    }
});

如果你坚持要用原来的两个<p>元素（right和wrong） #

也可以这样调整，核心是每次验证后清空另一个元素的内容：

HTML 代码（修正多余标签） #

<p>I have mountains - but no rocks, forest - but no trees, river - but no water. I'm here to help you. What am I?</p>
<input type="text" id="answer">
<button id="SbnAnswer" type="button">Answer</button>
<p id="right"></p>
<p id="wrong"></p>

JavaScript 代码 #

document.getElementById('SbnAnswer').addEventListener('click', function() {
    const userAnswer = document.getElementById('answer').value.trim().toLowerCase();
    const rightElement = document.getElementById('right');
    const wrongElement = document.getElementById('wrong');

    if (userAnswer === 'map' || userAnswer === 'a map') {
        rightElement.textContent = "Congratulations, you answered right!";
        wrongElement.textContent = ""; // 清空错误提示
    } else {
        wrongElement.textContent = "Your answer is wrong.";
        rightElement.textContent = ""; // 清空正确提示
    }
});

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