求助：用JavaScript校验输入值并显示对应图片的实现问题

我是编程新手，正在完成作业并尝试课本外的拓展内容，但遇到了问题。我编写了如下简单HTML结构：

<tr>
  <td id="som1">5 + 3 =
    <input id="a_som1" type="number" required>
  </td>
  <td>
    <img src="goed.png" alt="goed" title="goed" id="i-s1g">
    <img src="fout.png" alt="fout" title="fout" id="i-s1f">
  </td>
</tr>

页面末尾有一个按钮，我希望点击该按钮时，脚本校验输入的答案，显示对应正确（goed.png）或错误（fout.png）的图片。我通过以下CSS代码将图片隐藏：

img {
  width: 35px;
  display: none;
}

我尝试了如下JavaScript代码但无法运行，同时想咨询是否必须使用$(document).ready(function(){})：

$(document).ready(function() {
$("#cont").click {
  if ($("#a_som1").val() 8 ) {
      show("#i-s1g")
  }
  else {
      show("#i-s1f")
  }
  }

一、JavaScript代码的错误点及修正 #

你的JS代码存在几处语法错误，修正后的完整代码如下：

$(document).ready(function() {
  // 绑定按钮点击事件，需传入回调函数
  $("#cont").click(function() {
    // 将输入值转为数字，val()默认返回字符串
    const inputValue = Number($("#a_som1").val());
    // 用全等运算符做条件判断
    if (inputValue === 8) {
      // 调用jQuery的show()方法显示正确图片，同时隐藏错误图片
      $("#i-s1g").show();
      $("#i-s1f").hide();
    } else {
      // 显示错误图片，隐藏正确图片
      $("#i-s1f").show();
      $("#i-s1g").hide();
    }
  });
});

错误说明：

• 点击事件绑定语法错误：$("#cont").click { 需改为 $("#cont").click(function() {，click方法必须传入回调函数才能执行点击逻辑。
• 条件判断缺少运算符：$("#a_som1").val() 8 需改为 inputValue === 8，同时要把字符串类型的输入值转为数字，避免类型不匹配导致的判断错误。
• show方法调用错误：show("#i-s1g") 需改为 $("#i-s1g").show()，jQuery的show()是选择器对象的方法，不能直接单独调用。
• 额外优化：每次校验时隐藏另一张图片，防止两张图片同时显示。

二、关于$(document).ready(function(){})的疑问 #

不是必须，但非常推荐使用：

• 它的作用是等待页面所有DOM元素加载完成后再执行内部代码，避免因DOM未加载完成就执行选择器操作（比如找不到#cont按钮）而报错。
• 如果你的JS代码放在页面末尾（</body>标签之前），也可以不用这个方法，因为此时DOM已经加载完成。但为了代码的健壮性和兼容性，尤其是不确定代码位置时，使用它更稳妥。

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