如何正确获取HTML输入框文本关联JavaScript实现回文检测

你现在的代码失效是三个明确的问题导致的：

• 输入值读取时机完全错误：const str = document.getElementById('input').value;这行代码在页面刚加载完成时就执行了，此时输入框是空的，后续你在输入框填内容时，这个str变量不会自动同步更新，永远保存的是页面加载时的空字符串。
• 回文比对逻辑有漏洞：你只对反转后的字符串做了小写转换，原始输入字符串没有做统一的小写处理，只要输入内容带大写字母就会出现比对错误。另外你给reverse()传的空参数是无效语法，虽然不影响运行，但属于冗余写法。
• 按钮点击触发compare(str)时，传入的就是前面提到的、页面加载时就固定的空字符串，根本拿不到用户输入的实时内容。你之前改控制台输出能“正常运行”本质是测试时直接在控制台给str赋了值，不是从输入框拿的实时值，所以没暴露这个问题。

核心原则：不要在页面加载时提前读输入框的值，要在用户点击检测按钮的瞬间，实时读取输入框的最新内容。

修正后的JS代码 #

// 字符串反转处理函数
function reverseString(str){
    // 统一转小写、去除首尾空格后再做反转处理
    const cleanStr = str.toLowerCase().trim();
    return cleanStr.split('').reverse().join('');
}

// 检测比对函数
function compare(){
    // 点击触发时才实时获取输入框内容
    const inputContent = document.getElementById('input').value.trim();
    const answerDom = document.querySelector("#answer");
    
    // 处理空输入场景
    if (!inputContent) {
        answerDom.innerHTML = '请先输入要检测的内容';
        return;
    }

    // 统一把原输入转小写后和反转结果比对，避免大小写导致的误判
    if (reverseString(inputContent) === inputContent.toLowerCase()){
        answerDom.innerHTML = '这是一个回文';
    } else {
        answerDom.innerHTML = '这不是一个回文';
    }
}

对应调整HTML的按钮绑定 #

因为compare函数会自行读取输入内容，不需要额外传参，把按钮上的内联事件参数去掉即可：

<body>
    <div class="checkerContainer">
        <h1 id="heading">回文检测器</h1>
        <h2 id="subtext">输入单词或短语！</h2>
        <div id="answer">检测结果将在这里显示</div>
        <input type="text" id="input" placeholder="输入要检测的单词或短语">
        <button type="button" id="submit" onclick="compare()">开始检测</button>
    </div>  
</body>

可选优化 #

• 如果需要支持带标点、空格的短语回文检测（比如经典回文句A man, a plan, a canal: Panama），可以在清洗字符串时把非字母数字的字符全部过滤掉，把cleanStr的处理逻辑改成：

const cleanStr = str.toLowerCase().replace(/[^a-z0-9]/g, '');

• 更规范的事件绑定写法不推荐用内联onclick，可以直接在JS里给按钮绑定点击事件，删掉HTML里的onclick属性，加这行JS即可：

document.getElementById('submit').addEventListener('click', compare);

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