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

Javascript getElementById value setting getting reset on function return

本文关键字：返回 函数 getElementById 设置 Javascript      更新时间：2023-09-26

我有一个简单的函数来显示/隐藏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=按钮。我将表单删除为一个带有type按钮的输入元素。效果非常好。感谢大家的帮助！！！我真的很感激你的回答

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

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');"/>

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

您不应该仅仅为了拥有一个可以执行某些操作的按钮而使用表单。请尝试使用
<button onClick="showhide('specname');">Toggle</button>(并完全摆脱形式(

在你的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'); 
}

也许两种都试一下，看看你需要哪一种。

干杯。

相关文章：