点击含/不含图片的<td>元素播放对应音频的问题排查

原代码的核心问题 #

1. 重复ID违反HTML规范：多个<td>使用了同一个id='record'，getElementById只会返回页面中第一个匹配该ID的元素，导致无论点击哪个<td>，判断逻辑都只基于第一个带ID的<td>，这是始终播放默认音频的根本原因。
2. 未获取当前点击的元素：函数里硬编码获取id='record'的元素，完全没用到点击事件的目标元素，逻辑方向错误。
3. 遍历childNodes效率低且易出错：childNodes包含文本节点（比如换行、空格），这些节点没有tagName属性，遍历过程中可能引发错误，且没必要手动遍历判断是否存在图片。

修复后的代码实现 #

方案一：直接传递点击元素（简单直观）

修改HTML，将重复ID改为class，并在点击时传递当前元素：

<table>
  <tr>
    <td>Record 1:</td>
    <td class='record' onclick='play_alert_audio(this)'><img src='record.jpg'></td>
  </tr>
  <tr>
    <td>Record 2:</td>
    <td class='record' onclick='play_alert_audio(this)'>Text Only here</td>
  </tr>
  <tr>
    <td>Record 3:</td>
    <td class='record' onclick='play_alert_audio(this)'>Text Only here</td>
  </tr>
  <tr>
    <td>Record 4:</td>
    <td class='record' onclick='play_alert_audio(this)'><img src='record.jpg'></td>
  </tr>
</table>
<audio id="alert_audio" src="alert.mp3" type="audio/mpeg" loop="loop"></audio>
<audio id="alert_audio1" src="marimba.wav" type="audio/wav" loop="loop"></audio>

修改JavaScript函数，接收当前点击的<td>并判断是否包含图片：

function play_alert_audio(clickedTd) {
  // 默认选择默认音频
  let audio_element = document.getElementById("alert_audio");
  
  // 检查当前点击的td内是否存在img元素
  if (clickedTd.querySelector('img')) {
    audio_element = document.getElementById("alert_audio1");
  }
  
  // 若音频未播放则开始播放
  if (audio_element.paused) {
    audio_element.play();
  }
}

方案二：事件委托（更优雅的现代写法）

无需给每个<td>绑定点击事件，给父级table绑定一次事件即可：

<table id="record_table">
  <tr>
    <td>Record 1:</td>
    <td class='record'><img src='record.jpg'></td>
  </tr>
  <tr>
    <td>Record 2:</td>
    <td class='record'>Text Only here</td>
  </tr>
  <tr>
    <td>Record 3:</td>
    <td class='record'>Text Only here</td>
  </tr>
  <tr>
    <td>Record 4:</td>
    <td class='record'><img src='record.jpg'></td>
  </tr>
</table>
<audio id="alert_audio" src="alert.mp3" type="audio/mpeg" loop="loop"></audio>
<audio id="alert_audio1" src="marimba.wav" type="audio/wav" loop="loop"></audio>

对应的JavaScript代码：

// 给表格绑定点击事件
document.getElementById('record_table').addEventListener('click', function(e) {
  // 找到被点击的.record类td元素
  const clickedTd = e.target.closest('.record');
  if (!clickedTd) return; // 点击的不是目标td，直接退出
  
  let audio_element = document.getElementById("alert_audio");
  if (clickedTd.querySelector('img')) {
    audio_element = document.getElementById("alert_audio1");
  }
  
  if (audio_element.paused) {
    audio_element.play();
  }
});

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