开发奥赛罗游戏时无法读取DOM中图片src属性的问题求助

你遇到的问题核心很清晰：document.getElementById(id) 获取到的是 <td> 元素，而 src 属性属于 <td> 内部嵌套的 <img> 标签，直接读取 <td> 的 src 自然会返回 undefined。

下面是几种可行的解决方式：

方式一：先获取单元格，再定位内部图片 #

修改你的 JavaScript 代码，先拿到目标 <td>，再通过选择器找到里面的 <img> 元素后读取 src：

function placeToken(id) {
  const cell = document.getElementById(id);
  const squareImg = cell.querySelector('img');
  console.log(squareImg.src);
}

方式二：点击事件中直接传递图片相关内容 #

可以在 HTML 的 onclick 里直接传递 <img> 元素或它的 src 属性，省去后续查找步骤：

传递图片元素 #

<td class="cell" id="2-1" onclick="placeToken(this.querySelector('img'))"> 
  <img src="/images/emptySquare.png">
</td>

对应 JS 代码：

function placeToken(imgElement) {
  console.log(imgElement.src);
}

直接传递src属性 #

<td class="cell" id="2-1" onclick="placeToken(this.querySelector('img').src)"> 
  <img src="/images/emptySquare.png">
</td>

对应 JS 代码：

function placeToken(imgSrc) {
  console.log(imgSrc);
}

方式三：使用事件委托（更推荐） #

避免给每个单元格单独绑定 onclick，直接给整个棋盘表格绑定一个点击事件，通过事件目标判断操作对象：

// 假设你的棋盘表格有标识，比如id="othello-board"
document.getElementById('othello-board').addEventListener('click', function(e) {
  // 确保点击的是图片元素
  if (e.target.tagName === 'IMG') {
    console.log(e.target.src);
    // 如果需要单元格id，可通过父元素获取
    console.log(e.target.parentElement.id);
  }
});

这种方式代码更简洁，也更便于后续维护。

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