如何根据输入框值显示按钮？输入匹配隐藏框仍不生效问题

我懂你现在的困扰——明明控制台里确认两个输入框的值已经完全匹配了，但按钮就是不肯显示出来对吧？咱们来一步步排查可能的问题，把这个bug解决掉。

首先看你给出的代码片段，最明显的问题： #

你写的if(x==z...是不完整的！这种语法错误会直接导致整个action函数执行中断，后面显示按钮的逻辑根本没机会运行。先把if语句补全，比如：

if(x == z) {
  document.getElementById('btn').style.visibility = 'visible';
}

然后排查其他可能的坑： #

• 函数没被触发：你有没有把action函数绑定到输入框的事件上？比如如果只是定义了函数，但没给numexam输入框加oninput="action()"或者用addEventListener绑定input/change事件，那输入内容的时候根本不会执行判断逻辑。

• 值的类型或空格问题：输入框的value是字符串类型，如果隐藏框的numexam2值是数字（比如通过JS赋值的数字类型），或者用户输入时不小心加了首尾空格，都会导致==判断失效。建议加上trim()去掉空格，并用严格相等===判断：

  var x = document.getElementById('numexam').value.trim();
  var z = document.getElementById('numexam2').value;
  if(x === z) {
    document.getElementById('btn').style.visibility = 'visible';
  }
  

• 样式冲突：如果按钮本身还有display: none的样式，那就算把visibility改成visible也不会显示。可以检查一下按钮的CSS，或者直接用style.display = 'block'（根据按钮的布局调整值，比如inline-block）来控制显示。

给你一个完整的可运行示例： #

<input type="text" id="numexam" placeholder="输入匹配内容">
<input type="hidden" id="numexam2" value="test123">
<button id="btn">确认按钮</button>

<script>
// 初始隐藏按钮
const btn = document.getElementById('btn');
btn.style.visibility = 'hidden';

// 定义匹配检查函数
function checkMatch() {
  const inputVal = document.getElementById('numexam').value.trim();
  const hiddenVal = document.getElementById('numexam2').value;
  
  if (inputVal === hiddenVal) {
    btn.style.visibility = 'visible';
  } else {
    btn.style.visibility = 'hidden';
  }
}

// 绑定到输入框的实时输入事件
document.getElementById('numexam').addEventListener('input', checkMatch);
</script>

最后提醒： #

打开浏览器控制台看看有没有报错信息——比如如果元素ID写错了（比如把numexam写成numExam），会导致getElementById返回null，操作null的value或style就会报错，直接阻断代码执行。

内容的提问来源于stack exchange，提问作者Mehdi El Aissi