将 onClick 从 HTML 迁移到 Javascript 文件

Question

在我的 HTML 中，这个有效

<div id="portfolio1" onclick="changeMainFrame('lib/portfolio1.html')">

触发以下功能：

function changeMainFrame(srcURL){
  var target = document.getElementById("mainFrame");
  target.src = srcURL;
}

我想将它迁移到我的 javascript 文档中。但这不起作用：

document.getElementById("portfolio1").onclick = changeMainFrame("lib/portfolio1.html");

我不知道如何解决这个问题。有什么提示吗？如此简单却费时的事情，在任何地方都找不到类似的情况。

Answer 1

document.getElementById("portfolio1").onclick = function() {
  changeMainFrame("lib/portfolio1.html");
}

您正在调用函数 changeMainFrame。您要做的是提供一个函数包装器。

document.getElementById("portfolio1").onclick = function() {
  changeMainFrame("lib/portfolio1.html");
}

function changeMainFrame(txt) {
  alert(txt);
}

<div id="portfolio1">Click Me</div>

Answer 2

您需要为 document.getElementById("portfolio1").onclick 分配一个函数，该函数将在单击该元素时调用。问题是您没有分配函数，而是分配了 invoking/calling 该函数的结果。您可以做的是提供一个函数，您可以在其中调用 changeMainFrame:

document.getElementById("portfolio1").onclick = function() {
    changeMainFrame("lib/portfolio1.html");
};

Answer 3

您需要使用 .onclick 或 onclick 属性。它们都需要一个处理程序函数，而您传递的只是运行您的 changeMainFrame 函数（空）的结果。将其包装在 function() { } 中会产生您预期的结果。

function changeMainFrame(srcURL){
  var target = document.getElementById("mainFrame");
  target.src = srcURL;
}
document.getElementById("portfolio1").onclick = function(){changeMainFrame('https://codepen.io')}

<div id="portfolio1">go to codepen.io</div>
<iframe id="mainFrame" src="https://example.com"></iframe>

将 onClick 从 HTML 迁移到 Javascript 文件

Migrate onClick from HTML to Javascript file

javascript

onclick

getelementbyid