JQuery功能异常排查：输入匹配数组时无法显示对应答案

嘿，我帮你找出几个导致功能失效的关键点啦，咱们一个个来看：

1. 输入值获取时机错误 #

你在页面加载时就执行了var input = $("#vraag").val();，这时候输入框是空的，之后用户输入内容时，这个input变量不会自动更新。得在触发事件（回车/点击按钮）的时候再获取当前输入框的内容才行。

2. 数组匹配逻辑错误 #

你用if(input == vragen)把输入的字符串和整个数组直接比较，这永远不会相等哦。应该检查输入值是否存在于vragen数组中，还要找到对应的索引，这样才能取出antwoorden里的对应答案。

3. 按钮点击事件未实现核心逻辑 #

目前按钮点击只是弹出alert，没有执行匹配和显示答案的逻辑，得把回车事件里的逻辑复用过来。

4. 匹配成功后未插入答案内容 #

即使匹配成功，你也没把对应的答案放到#arraytext里，所以text2区域就算显示了也看不到内容。

修正后的完整代码 #

我把这些问题都修复了，你可以直接用：

<section>
 <img id="samen" src="img/samen.svg" alt="samen">
 <img id="klein" src="img/klein.svg" alt="klein">
 <div id="text1">
 <p>Vb.: Professor waarvoor staat html?</p>
 <p>antwoord: HyperText Markup Language</p>
 <input type="text" name="vraag" id="vraag" onkeypress="keyCode(event)" placeholder="Professor, mag ik iets vragen?" required/><br>
 <input id="button" type="submit" name="button" value="wat kan ik stellen?" />
 </div>
 <img id="groot" src="img/groot.svg" alt="groot">
 <div id="text2">
 <p id="arraytext"></p>
 </div>
</section>
</main>
<footer>
 <img id="logo" src="img/logo.png" alt="logo">
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 记得引入jQuery哦，如果还没加的话 -->
<script>
var vragen = ["is het gif of jif?"];
var antwoorden = ["Het is Gif tenzij je de historie kent."];

// 把核心逻辑抽成一个函数，方便回车和按钮点击复用
function checkQuestion() {
  var input = $.trim($("#vraag").val()); // 去掉前后空格，避免用户输入空格导致匹配失败
  var index = vragen.indexOf(input);
  if (index !== -1) {
    // 匹配成功，显示text2并插入对应答案
    $('#text2').css('display', 'inline-block');
    $('#arraytext').text(antwoorden[index]);
  } else {
    // 可以在这里加不匹配时的提示，比如隐藏text2或者显示错误信息
    $('#text2').css('display', 'none');
    alert("抱歉，这个问题我还不会回答哦！");
  }
}

// 按钮点击事件
document.getElementById('button').onclick = function() {
  checkQuestion();
}

// 回车触发事件
function keyCode(event) {
  var x = event.which || event.keyCode;
  if (x == 13) {
    event.preventDefault(); // 阻止默认的表单提交行为
    checkQuestion();
  }
}
</script>

额外优化点说明 #

• 我把核心逻辑抽成了checkQuestion()函数，这样回车和按钮点击都能复用，避免重复代码。
• 用$.trim()去掉输入内容的前后空格，防止用户不小心输入空格导致匹配失败。
• 加入了不匹配时的处理逻辑（隐藏text2+提示），提升用户体验。
• 记得确保页面引入了jQuery库，如果还没加的话，要加上<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>这行哦。

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