HTML表格单单元格图片源修改失效问题求助

你的代码存在三个关键问题，逐一修复即可正常运行：

• 按钮点击事件未正确触发函数
  按钮的onclick属性需要写changeSource()而非changeSource，不加括号仅代表引用函数，不会执行它：

  <button onclick="changeSource()">change</button>
  

• 错误操作了td元素而非目标img元素
  你获取的是id为8A的td单元格，但td本身没有src属性，要修改的是单元格内img标签的src。有两种修复方式：
  方式一：给img单独添加id，直接操作img

  <td id="8A">
      <img id="img8A" src="Media/empty_square_white.png" height="160px" width="160px">
  </td>
  <script>
      function changeSource(){
          document.getElementById("img8A").src="Media/empty_square_brown.png";
      }
  </script>
  

  方式二：通过td元素找到内部的img

  <script>
      function changeSource(){
          document.getElementById("8A").querySelector("img").src="Media/empty_square_brown.png";
      }
  </script>
  

• 图片路径可能不匹配
  原图片路径是Media/empty_square_white.png，修改后的路径是empty_square_brown.png，如果棕色图片同样存放在Media文件夹下，需保持路径一致，否则会出现图片找不到的情况。

修复后的完整示例代码：

<tr><!-- 8 -->
    <td id="8A"><!-- A -->
        <img id="img8A" src="Media/empty_square_white.png" height="160px" width="160px">
    </td>
</tr>
...
<script>
    function changeSource(){
        document.getElementById("img8A").src="Media/empty_square_brown.png";
    }
</script>
<button onclick="changeSource()">change</button>

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