Question

在我的HTML中，这可行

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

触发以下功能：

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

我想将其迁移到我的javascript doc。但这不起作用：

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分配一个函数，该函数将在单击该元素时被调用。问题是，您没有分配函数，而是分配了调用/调用该函数的结果。你可以做的是提供一个函数，在其中你调用changeMainFrame：

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

Answer 3

您需要使用.onclick或onclick属性。它们都需要一个处理函数，你传递的只是运行你的changeMainFrame函数（null）的结果。将其包裹在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文件

3 个答案: