Question

我有一个简单的函数来显示/隐藏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 =按钮。我删除了表单只是一个带有类型按钮的输入元素。这非常有效。谢谢大家的帮助!!!我非常感谢你的回答！

Answer 1

以下内容在某些浏览器中不会执行任何操作：

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;
 }

Answer 2

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

Answer 3

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

试试这个

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

或者

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

Answer 4

你不应该使用表单只是为了有一个按钮来做某事。相反，尝试使用
<button onClick="showhide('specname');">Toggle</button>（并完全摆脱表格）

Answer 5

尝试使用showhide（）。

function showhide(name){
    var elem = document.getElementById(name);
    (elem.style.visibility == 'hidden'?elem.style.visibility = 'visible':elem.style.visibility = 'hidden'); 
}

或类似地：

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

也许尝试两者，看看你需要哪些。

干杯。

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

5 个答案: