Javascript元素隐藏不起作用答案

【问题标题】：Javascript element hiding not workingJavascript元素隐藏不起作用
【发布时间】：2011-11-21 15:37:16
【问题描述】：

我试图通过在页面开头定义一个 javascript 函数并通过按钮的 onclick 属性调用它来隐藏我的 html 表单中的元素。当我单击按钮时，浏览器（firefox 4.x）似乎最初尝试隐藏给定元素，但随后很快重新加载它。如果没有脚本，浏览器显然不会尝试隐藏元素。以下是相关代码：

function showHide() {
document.getElementById('search').style.display = 'none';
}


<button onclick="showHide()">Advanced</button>

firefox 是否默认使用它在 css 文件中找到的内容，而不是使用 javascript 修改？

编辑#1：首先，我试图让一个文本编辑字段消失。当我单击“高级”按钮时，它会消失一秒钟，然后重新出现。我尝试在 showHide() 结束时返回 false，但什么也没做，我尝试 onclick="return showHide();"但这也不起作用。我检查了css文件，没有显示：可能与此冲突的设置。我会看看我是否无法在几分钟后将它放到我的服务器上并发布链接。

编辑#2：感谢您的帮助。更改按钮的类型属性通过阻止按钮默认为“提交”来解决问题，如下所示。这可以防止表单被重新加载，这导致元素每次尝试消失时都会重新出现。像我这样的初学者不会知道的。

【问题讨论】：

尝试在showHide()末尾添加return false;
不，它肯定使用了 javascript 修改（可能除非你的 CSS 有 !important ）。你说它隐藏它但然后重新加载？我不太明白你的意思（你能给我们一个页面链接吗？）。这里似乎还有其他事情发生。
您检查过萤火虫显示的任何错误吗？有时会很有帮助。
提醒：您应该将@Lee 的答案标记为正确..

标签： javascript css forms show-hide

【解决方案1】：

我怀疑它与范围有关。试试这个：

<button onclick="document.getElementById('search').style.display = 'none';">Advanced</button>

如果它有效，您没有在正确的位置声明您的showHide() 函数。例如，我可以像这样打破 @jfriend00 的例子：

http://jsfiddle.net/NYZrX/1/

这是在 html 代码中混合 javascript 是不好的做法的原因之一，它都需要在全局范围内......

【讨论】：

【解决方案2】：

html <button> 元素支持type 属性。如果省略，则默认为type="submit"。这会导致按钮的工作方式与<input type="submit" /> 完全相同。

所以...如果您的按钮位于表单内，则单击该按钮会导致单击处理程序运行（调用 showHide()），但然后它会提交表单。是表单提交导致页面重新加载。

要解决此问题，只需将正确的类型添加到您的按钮：

<button type="button" onclick="showHide()">Advanced</button>

【讨论】：

@Adam - 很高兴能帮上忙。您介意将答案标记为已接受吗？（只需单击答案旁边的绿色复选标记）。谢谢！

【解决方案3】：

您的页面中必须有其他内容，因为基本代码在 Firefox 和其他浏览器中运行良好。您可以在此处亲自试用演示：http://jsfiddle.net/jfriend00/LpC36/。

我建议您描述一下页面上还有什么内容？其他代码？ CSS？其他对象和交互？表格提交？尝试向我们展示 HTML。

例如，如果按钮是提交按钮，它可能是提交表单并重新加载页面。

【讨论】：