JavaScript : What is it about my code that means the second image only displays for a nano-second

Question

我正在使用一个函数 HideFrame 来隐藏/显示两个 iframe 的左侧。该函数由使用按钮 image1 和 image2 的 onclick() 事件调用。

不幸的是，当我单击 image1 隐藏左框架时，image2 仅显示一纳秒，然后 image1 再次显示。

我做错了什么？

我只是一个初学者，所以慢慢来。

function HideFrame() {
var fr = window.top.document.getElementById ("body_left");
var fs = window.top.document.getElementById ("body_right");
var img1 = document.getElementById("image1");
var img2 = document.getElementById("image2");


if(fr.style.width=="33.5%") {
fr.style.width="0%";
fs.style.width="99.5%";
img1.style.display="none"; 
img2.style.display="inline";


}
else {
fr.style.width="33.5%";
fs.style.width="65.8%";
img1.style.display="inline"; 
img2.style.display="none";

}
}

<input type="image" src="./hideframe.png"  id="image1"
style="display:inline"              
title="Hide/show left panel" onclick="HideFrame()"/>

<input type="image" src="./showframe.png"  id="image2"  style="display:none"
title="Hide/show left panel" onclick="HideFrame()"/>

Answer 1

单击图像会提交您的页面，这会导致页面重新加载并且图像 1 再次可见。从 HideFrame 返回 false 将阻止这种情况发生。