HTML国旗猜谜游戏输入框取值失败、按钮判断逻辑不生效求助

代码问题列表 #

• 未正确获取输入框内容：无法直接通过id名guessfun读取输入值，需要先获取输入框DOM节点，再读取.value属性
• 变量名冲突：函数名guess和id为guess的h2元素重名，guess.value读取的是h2元素不存在的value属性，不是输入框的内容
• 不等运算符写法错误：判断不相等的符号写反成了=!，正确写法为!==
• 多余的全局执行逻辑：末尾onclick = guess();会在页面加载时自动触发一次guess函数，属于冗余代码
• 不规范的DOM调用：直接用元素id作为全局变量使用存在浏览器兼容性问题，建议统一用document.getElementById主动获取对应DOM元素
• 输入内容未做空白字符处理：用户输入前后带空格时会导致判断失败，建议添加trim()处理输入值

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>The America's</title>
</head>
<body>
<img src = "Colombia.png">
</br>
<p><em>上方展示的是哪个国家的国旗？</em></p>
<h1 id="flag">...</h1>
<h2 id = "guess">...</h2>
<h3 id = "result">...</h3>

<input id="guessfun" type ="text">
<button id = "button_enter" onclick="guess()">Enter</button>

<script>
function guess(){
  // 获取输入值并去除前后空格
  const inputValue = document.getElementById('guessfun').value.trim();
  // 获取需要操作的DOM元素
  const guessEle = document.getElementById('guess');
  const resultEle = document.getElementById('result');

  guessEle.textContent = inputValue;
  if (inputValue === "Colombia"){
    resultEle.textContent = "Yes! That's the flag of " + inputValue;
    alert("Yes");
  } else {
    resultEle.textContent = "No! That's the Colombian Flag!";
    alert("No");
  }
}
</script>
</body>
</html>

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