你的问题是你忘了在函数名后面添加
()。
此外，还有几个要纠正的地方：
不要使用内联 HTML 事件属性（onclick、onmouseover 等），因为它们：
- 创建难以阅读和调试的“意大利面代码”。
- 导致代码重复。
- 不具备良好的扩展性。
- 不遵循关注点分离的开发方法论。
- 会在回调函数中创建匿名全局包装函数，改变了
this绑定。
- 不遵循W3C事件标准。
- 不会将对 DOM 事件的引用传递给处理程序。
连MDN都同意
内联事件处理程序 - 不要使用这些
你可能在你的代码中也会看到这样的模式：
<button onclick="bgChange()">Press me</button>
function bgChange() {
const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
document.body.style.backgroundColor = rndCol;
}
在 Web 上注册事件处理程序的最早方法是使用事件处理程序 HTML 属性（或内联事件处理程序），就像上面显示的那样 - 属性值实际上是您希望在事件发生时运行的 JavaScript 代码。上面的示例调用了在同一页上定义的
script 元素中的函数，但您也可以直接将 JavaScript 插入到属性中，例如：
<button onclick="alert('This is my old-fashioned event handler!');">Press me</button>
你可以找到许多事件处理程序属性的HTML属性等效物；然而，你不应该使用它们——这被认为是一种不好的做法。如果你只是做一些很快的事情，使用事件处理程序属性可能看起来很简单，但它们很快就会变得难以管理和低效。
首先，将HTML和JavaScript混在一起并不是一个好主意，因为这样会变得难以阅读。将JavaScript与HTML分开是一种良好的实践，如果它在一个单独的文件中，你可以将其应用于多个HTML文档。
即使在一个文件中，内联事件处理程序也不是一个好主意。一个按钮还可以接受，但如果有100个按钮呢？你将不得不向文件中添加100个属性；它很快就会变成一个维护噩梦。使用JavaScript，你可以轻松地为页面上的所有按钮添加一个事件处理程序函数，无论有多少个按钮，可以像这样做：
const buttons = document.querySelectorAll("button");
for (const button of buttons) {
button.addEventListener("click", bgChange);
}
最后，许多常见的服务器配置将禁止内嵌 JavaScript，作为一种安全措施。
你永远不应该使用 HTML 事件处理程序属性-这些已过时，使用它们是不良实践。
相反，将所有工作都放在 JavaScript 中，并使用
.addEventListener() 来设置事件处理程序。
不要在可以使用按钮（或其他元素）的情况下使用超链接。如果你确实要使用超链接，你需要禁用其默认的导航行为，这可以通过将
href 属性设置为
# 而不是
"" 来实现。
var btn = document.getElementById("btnChangeSrc");
var iFrame = document.getElementById("contentFrame");
btn.addEventListener("click", getContent);
function getContent() {
console.log("Old source was: " + iFrame.src);
iFrame.src="LoremIpsum.html";
console.log("New source is: " + iFrame.src);
}
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
<li>Configuration Guides</li>
<li>API Guides</li>
</ul>
<button id="btnChangeSrc">Change Source</button>
</div>
<iframe class="content" id="contentFrame" src="dummy.html"></iframe>
