Javascript getElementById值设置在函数返回时重置

我有一个简单的函数来显示/隐藏div元素。我有一个javascript函数来实现这一点。我用Opera调试了这个。函数在div元素上正确设置隐藏值。我可以看到div元素消失了。但是，当函数返回时，div元素重新出现。javascript函数位于自己的文件中：main.js:

function showhide(name){
    var elem = document.getElementById(name) ;
    if( elem.hidden == false ) {
        document.getElementById(name).hidden = true ;
    } else {
        document.getElementById(name).hidden = false ;
    }
}

Html是：

<div class=wrap><p>
<div class=sidebar>
    <FORM><input type="submit" value="Toggle" onclick="showhide('specname');"/></FORM></div>
<div class=main>main Div
    <div id="specname">collapsible text</div></div></p></div>.

主要部门
可折叠文本
。

我在javascript函数showhide中设置了调试断点，以查看值是否设置正确。但在函数返回时，该值被重置

这可能是我错过的一些简单的东西，但似乎看不见？有什么想法吗？谢谢

---

答案解决了我的问题。我错过了提交重新绘制页面的事实，我丢失了更改。我将type=submit更改为type=button。我将表单删除为一个带有类型按钮的输入元素。这很有效。谢谢大家的帮助！！！我真的很感激你的回答

可能是因为当您单击按钮时，表单会提交并刷新页面？

在某些浏览器中，以下操作不会起任何作用：

document.getElementById(name).hidden = true

换成

document.getElementById(name).style.display = 'block' // and 'none' for the matching line

这能满足你的需要吗

---

正如其他人所指出的，它也在提交页面-使用不同的元素或更改函数以启动：

function showHide(e, name) {
     e.preventDefault();
     //do the toggle here
     return false;
 }

---

问题是您正在使用提交控件，该控件将提交到服务器并刷新页面。您想停止提交或更改控件类型。以下两项都应该有效。我推荐第二种

试试这个

<FORM><input type="submit" value="Toggle" onclick="showhide('specname'); return false;"/>

还是这个

<input type="button" value="Toggle" onclick="showhide('specname');"/>

---

你不应该仅仅为了一个按钮而使用表单。相反，请尝试使用

切换

（并完全摆脱表单）

在showhide（）中尝试此操作

或类似地：

function showhide(name){
    var elem = document.getElementById(name);
    (elem.style.display== 'none'?elem.style.display= 'inline':elem.style.display= 'none'); 
}

也许两者都试一下，看看你需要什么

---

干杯。

谢谢大家！！这些解决方案奏效了。我最终使用按钮而不是提交。很高兴知道问题的真正原因！非常感谢你的帮助！！！

function showhide(name){
    var elem = document.getElementById(name);
    (elem.style.display== 'none'?elem.style.display= 'inline':elem.style.display= 'none'); 
}