javascript 按钮在第一次点击时不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28100979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button does not function on the first click
提问by nikolaos_mparoutis
function showCheckbox(){
var node_list = document.getElementsByClassName('check');
for (var i = 0; i < node_list.length; i++)
{
if(node_list[i].style.display == 'none') {
node_list[i].style.display = 'block';
} else { node_list[i].style.display = 'none'; }
}
}input[type=checkbox]{
display:none;
position:relative;
}<input type="button" value="Εμφ?νιση" onclick="showCheckbox()" />
<img src="form-images\trash.png" onclick="" style="width:21px;height:24px;margin-left:20px; "/>
<input type="checkbox" class="check" />
<label>Ψ?ρεμα</label>
<input type="text" />
</br>
<input type="checkbox" class="check" />
<label>Γ?πεδο</label>
<input type="text"/>
</br>When the page loads for first time and I press the button on the first click it does not triggers the onclick function. If I press it the second time it triggers the event.
当页面第一次加载并且我在第一次点击时按下按钮它不会触发 onclick 功能。如果我第二次按下它会触发事件。
Other <input type="button"/>buttons triggers the event on the first click without problem.
Does anyone know what is the problem or did it have the same?
其他<input type="button"/>按钮在第一次点击时触发事件没有问题。有谁知道是什么问题或是否有相同的问题？
采纳答案by nnnnnn
What I think is happening is that your click handler isbeing called on the first click, but your iftest isn't working the way you expect. This line:
我认为正在发生的事情是，你的点击处理程序被调用的第一次点击，但是你的if测试不工作，你期望的方式。这一行：
if(node_list[i].style.display == 'none')
...is testing whether the element has an inlinestyle set. Which it doesn't: it's hidden via a CSS rule that applies to all such inputs. So then your elsecase executes and the .displayis set to 'none'. Then on the nextclick, the ifworks as expected and changes .displayto 'block'.
...正在测试元素是否具有内联样式集。它没有：它通过适用于所有此类输入的 CSS 规则隐藏。那么你的else案例就会执行，并且.display设置为'none'. 然后在下一次单击时，if按预期工作并更改.display为'block'.
You can see this for yourself if you actually debug your function a littleto see if it is getting called and test the value of that .displayproperty - as you can see here: http://jsfiddle.net/uLjxp3ha/(note: I don't recommend alert()s for debugging).
如果您实际调试一下您的函数以查看它是否被调用并测试该.display属性的值，您可以亲眼看到这一点- 正如您在此处看到的：http: //jsfiddle.net/uLjxp3ha/（注意：我不' 不推荐alert()s 进行调试）。
Checking the current visibility as set by stylesheet rules is a bit trickier because it doesn't work consistently across browsers. You may need to test for existence of .currentStyleand .getComputedStyle()to allow for whichever one the current browser might support. Have a look at this answerto another question for more information about that.
检查由样式表规则设置的当前可见性有点棘手，因为它不能在浏览器中一致地工作。您可能需要测试是否存在.currentStyle并.getComputedStyle()允许当前浏览器可能支持的任何一种。看看this answerto another question了解更多信息。
But in your case given that you knowthe checkboxes are hidden to begin with you can simply invert your if/else:
但在你的情况下，你知道复选框是隐藏的，你可以简单地反转你的 if/else：
if(node_list[i].style.display == 'block') {
node_list[i].style.display = 'none';
} else {
node_list[i].style.display = 'block';
}
The .displaywill not be 'block'to start with, so the else will be executed and the elements will be displayed.
该.display不会是'block'用开始的，所以都不会被执行，元素将被显示出来。
回答by André Werlang
Your code is brittle, easy to break. I suggest you to create a clear separation of concerns between css and javascript.
你的代码很脆弱，很容易破解。我建议您在 css 和 javascript 之间创建一个明确的关注点分离。
Also, your use of checkclass was twofold: select elements and hide them. That are two things better managed not coupled to each other.
此外，您对check类的使用有两个方面：选择元素并隐藏它们。这是两件事更好地管理而不是相互耦合。
Changing an element class could be as easy as:
更改元素类可能很简单：
node_list[i].classList.toggle('check-hidden');
You'll need to create a new css class for the actually hidden checkboxes.
您需要为实际隐藏的复选框创建一个新的 css 类。
function showCheckbox(){
var node_list = document.getElementsByClassName('check');
for (var i = 0; i < node_list.length; i++)
{
node_list[i].classList.toggle('check-hidden');
}
}.check {
position:relative;
}
.check-hidden {
display:none;
}<input type="button" value="Εμφ?νιση" onclick="showCheckbox()" />
<img src="form-images\trash.png" onclick="" style="width:21px;height:24px;margin-left:20px; "/>
<input type="checkbox" class="check" />
<label>Ψ?ρεμα</label>
<input type="text" />
</br>
<input type="checkbox" class="check" />
<label>Γ?πεδο</label>
<input type="text"/>
</br>回答by nril
The style.display property is not present the first time you do the loop, you could change the code as follows:
第一次执行循环时不存在 style.display 属性，您可以按如下方式更改代码：
function showCheckbox(){
var node_list = document.getElementsByClassName('check');
for (var i = 0; i < node_list.length; i++)
{
if(node_list[i].style.display !== 'none' || !node_list[i].style.display) {
node_list[i].style.display = 'block';
} else { node_list[i].style.display = 'none'; }
}
}
A better solution might be (if you can use jQuery)
更好的解决方案可能是（如果您可以使用 jQuery）
function showCheckbox(){
$( "input.check" ).each(function() {
if ($(this).css('display') == 'none'){
$(this).css('display','block')
} else {
$(this).css('display','none')
}
});
}
回答by Normajean
Instead of writing display: none in your css file, write it inline in your html document so it'd be more like:
不要在你的 css 文件中写 display: none ，而是在你的 html 文档中内联写它，所以它更像是：
<input style="display: none" type="checkbox" class="check" />
回答by Andrew Matveev
reason is pretty simple: when you get a "style" property, it represents inline styles of that element. On fist click there is no inline style for "display", so else fork fires and sets inline style for "display" to "none"
原因很简单：当您获得“style”属性时，它表示该元素的内联样式。在第一次单击时，“显示”没有内联样式，因此叉会触发并将“显示”的内联样式设置为“无”
What you may do is next
你可以做的是下一步
Use computed style
window.getComputedStyle(node_list[i]).display == "none"
Or switch "if" statement to
if(node_list[i].style.display == 'block') node_list[i].style.display = 'none'; else node_list[i].style.display = 'block';
使用计算样式
window.getComputedStyle(node_list[i]).display == "none"
或将“if”语句切换为
if(node_list[i].style.display == 'block') node_list[i].style.display = 'none'; 否则 node_list[i].style.display = 'block';
https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle
https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle
