Javascript 元素隐藏不起作用
我试图通过在页面开头定义一个 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：感谢您的帮助。更改按钮的类型属性通过防止按钮默认为“提交”来解决问题，如下所示。这使得表单无法重新加载，从而导致该元素每次试图消失时都会重新出现。像我这样的初学者不会知道。
I tried to hide elements in my html form by defining a javascript function at the beginning of my page and calling it through a button's onclick attribute. It seems like the browser (firefox 4.x) tries initially to hide the given element when I click the button, but then quickly reloads it. Without the script, obviously, no attempt is made by the browser to hide the element. Here is the pertinent code:
function showHide() {
document.getElementById('search').style.display = 'none';
}
<button onclick="showHide()">Advanced</button>
Does firefox default to what it finds in the css file instead of using the javascript modifications?
Edit #1:
First off, I am trying to get an text edit field to disappear. When I click on the "Advanced" button, it does disappear for a fraction of a second and then reappears. I tried returning false at the end of showHide(), but that did nothing, and I tried onclick="return showHide();" but that didn't work as well. I checked the css file, and there are no display: settings that could conflict with this. I'll see if I can't get this up on my server in a few minutes and post the link.
Edit #2: Thanks for the help. Changing the type attribute of the button fixed the issue by preventing the button from defaulting to "submit," as suggested below. This kept the form from being reloaded, which was causing the element to reappear every time it tried to go away. Not something a beginner like me would have known.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
html
所以...如果您的按钮位于表单内，则单击该按钮会导致单击处理程序运行（调用 showHide()），但然后它会提交表单。表单提交导致页面重新加载。
要解决此问题，只需向按钮添加正确的类型即可：
The html
<button>element supports atypeattribute. If omitted, it defaults totype="submit". This causes the button to work exactly like an<input type="submit" />.So... if your button is located inside a form, then clicking the button causes the click handler to run (calling showHide()), but then it submits the form. It is the form submission that is causing the page reload.
To fix this, simply add the proper type to your button:
您的页面中必须有其他内容，因为基本代码在 Firefox 和其他浏览器中运行良好。您可以在这里亲自尝试演示：http://jsfiddle.net/jfriend00/LpC36/。
我建议您描述该页面上还可能发生什么？其他代码？ CSS？其他对象和交互？表格提交？尝试向我们展示 HTML。
例如，如果按钮是提交按钮，则它可以提交表单并重新加载页面。
There has to be something else going on in your page because the basic code works fine in Firefox and other browsers. You can try the demo for yourself here: http://jsfiddle.net/jfriend00/LpC36/.
I'd suggest you describe what else might be going on the page? Other code? CSS? Other objects and interactions? Form submission? Try showing us the HTML.
For example, if the button is a submit button, it could be submitting a form and reloading the page.
我怀疑这与范围有关。尝试一下：
如果有效，则说明您没有在正确的位置声明
showHide()函数。例如，我可以像这样打破 @jfriend00 的示例：http://jsfiddle.net/NYZrX/1/< /a>
这是在 html 代码中混合 javascript 是不好的做法的原因之一，它都需要在全局范围内......
I suspect it has to do with scope. Try this out:
if it works you didn't declare your
showHide()function in the right place. For example i can break @jfriend00 's example like this:http://jsfiddle.net/NYZrX/1/
this is one of this reasons it is bad practice to mix javascript in html code, it all needs to be in the global scope...