基于表格内容实现Button OnClick跳转不同链接的问题求助

你的代码存在几个关键问题，导致无法正常运行，下面是问题点和修复后的完整代码：

问题点解析 #

• 执行时机错误：原代码在页面加载时直接执行判断逻辑，没有绑定到按钮的点击事件，所以点击按钮不会触发任何操作。
• 语法错误：else后面不能直接加条件，应该用else if；同时把比较运算符==写成了赋值运算符=，这会直接修改单元格内容而不是做判断。
• 跳转逻辑错误：window.open是全局方法，不能通过按钮元素调用；onclick = 'HTML2'的写法完全错误，需要给onclick赋值一个函数来执行跳转。
• 文本匹配问题：单元格里的<br>会让textContent包含换行或空白字符，直接用== "Blue"可能匹配失败，需要用trim()去除首尾空白。

修复后的完整代码 #

<table>
  <tr>
    <td><strong>TITLE</strong></td>
    <td id="colortype">Blue<br></td>
  </tr>
</table>

<button class="btn" id="button">Find Colors</button>

<script type="text/javascript">
// 获取按钮元素，绑定点击事件
document.getElementById("button").addEventListener('click', function() {
  // 获取单元格文本并去除首尾空白
  const colorText = document.getElementById("colortype").textContent.trim();
  
  if (colorText === "Blue") {
    // 跳转到HTML1（新开窗口）
    window.open("HTML1");
    // 若要在当前页面跳转，替换为：window.location.href = "HTML1";
  } else if (colorText === "Red") {
    // 跳转到HTML2（新开窗口）
    window.open("HTML2");
    // 若要在当前页面跳转，替换为：window.location.href = "HTML2";
  }
});
</script>

额外说明 #

• addEventListener是更推荐的事件绑定方式，相比直接赋值onclick，它不会覆盖其他可能绑定的事件监听，灵活性更高。
• 如果需要处理更多颜色类型，直接继续添加else if分支即可。

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