Javascript元素隐藏不起作用

Javascript element hiding not working

本文关键字：不起作用 隐藏 元素 Javascript      更新时间：2023-09-26

我试图通过在页面开头定义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属性可以防止按钮默认为"submit"，从而解决了这个问题，如下所示。这可以防止表单被重新加载，从而导致每次元素试图消失时都重新出现。像我这样的初学者是不会知道的。

html <button>元素支持type属性。如果省略，默认为type="submit"。这使得按钮完全像<input type="submit" />一样工作。

所以…如果您的按钮位于表单中，那么单击按钮将导致单击处理程序运行(调用showHide())，但是然后将提交表单。是表单提交导致页面重新加载。

要解决这个问题，只需为按钮添加适当的类型:

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

您的页面中一定有其他的东西，因为基本代码在Firefox和其他浏览器中运行良好。您可以在这里亲自尝试演示:http://jsfiddle.net/jfriend00/LpC36/.

我建议你描述一下页面上还会出现什么?其他代码?CSS呢?其他对象和交互?表单提交吗?试着给我们看一下HTML。

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

我怀疑这与作用域有关。试一下:

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

如果它工作，你没有在正确的地方声明你的showHide()函数。例如，我可以像这样打破@jfriend00的例子:

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

这就是为什么在HTML代码中混合javascript是不好的做法之一，它都需要在全局范围内…

相关文章：