Question

我试图通过在页面开头定义一个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：感谢您的帮助。更改按钮的type属性可以防止按钮默认为“提交”，从而解决问题，如下所示。这使得表单不会被重新加载，这导致元素每次试图消失时重新出现。不像我这样的初学者会知道的。

Answer 1

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

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

要解决此问题，只需在按钮中添加正确的类型：

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

Answer 2

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

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

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

Answer 3

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

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

如果有效，则不会在正确的位置声明您的showHide()功能。例如，我可以打破@jfriend00这样的例子：

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

这是在html代码中混合使用javascript的不良做法之一，这一切都需要在全球范围内...

Javascript元素隐藏不起作用

3 个答案: