在不使用onclick事件的情况下，使用javascript将ID链接到其他页面。

Question

我正在使用WordPress建网站，因此无法在HTML代码中添加事件onclick。但是我可以添加CSS和JavaScript。

我已将要点击的元素添加了ID，并添加了以下JavaScript代码：

document.getElementById('theID').onclick = function () {
    window.location.href = 'link';
}

我不理解为什么它不能正常运作。有其他更好的方法吗？

- Chimelin

---

理论上来说，这段代码会有效。演示链接：https://jsfiddle.net/hws3q1gp/ 。也许您是在元素不存在于页面之前运行此代码（因此getElementById将失败），您必须在目标元素之后包含脚本（或者至少确保它在“DomContentLoaded”事件处理程序内）。使用此代码时是否出现任何控制台错误？另一个问题是，每个对象只能分配一个onclick处理程序。因此，如果任何其他脚本正在尝试对此ID执行相同的操作，它可能会被覆盖。也许可以使用addEventListener而不是onclick，这样就不会有这个问题了。 - ADyson

您也可以考虑使用 https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener。 - Mark Schultheiss

你能至少展示渲染后的 HTML 吗？ - Mark Schultheiss

Answer 1

你不能使用jQuery吗？ 如果可以使用jQuery，就像这样绑定事件：

$("#theID").click(function(){
  location.href="link";
});

- Nick

---

@Chimelin 值得注意的是，这与我在上面评论中提到的使用 addEventListener 的功能等效。因此，如果这是您所做的全部更改，那么似乎问题是多个 onclick 定义互相覆盖，正如我所推测的那样。我之所以提到这一点，是因为不仅要知道某些东西起作用，还要理解 为什么 它起作用，这样我们就可以避免类似的问题。 - ADyson

Answer 2

如果@ADyson所说的是真的，你需要等待网页加载完成，然后调用onclick功能来重定向到不同的网页：

 window.onload = function () { document.getElementById("redirectThis").onclick = function () {
        location.href = "www.yoursite.com";
    }; }
 

 <div class="container">
    <button id="redirectThis">Click this to direct it</button>
  </div>

- TheUnKnown