第一次单击时按钮不起作用 [英] Button does not function on the first click
问题描述
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 = 按钮 value =Εμφάνιση onclick = showCheckbox（） />< img src = form-images\trash.png onclick = style = width：21px; height：24px; margin-左：20px; /> <输入type = checkbox class = check /> < label>Ψάρεμα< / label> < input type = text /> < / br> <输入type = checkbox class = check /> < label>Γήπεδο< / label> < input type = text /> < / br>
首次加载页面时，我在第一次单击时按了按钮，但不会触发onclick函数。
如果第二次按下它会触发事件。
其他< input type = button /> 按钮在第一次单击时触发事件，没有问题。
有人知道问题出在哪里吗？
我认为正在发生的事情是您的点击处理程序 会在首次点击时被调用，但是您的 if 测试无法按您期望的方式运行。这行：
if（node_list [i] .style.display =='none'）
...正在测试元素是否具有 inline 样式集。并非如此：通过适用于所有此类输入的CSS规则将其隐藏。因此，您的 else 案例将执行，并且 .display 设置为'none'。然后在下一步上单击 if 可以按预期工作，并将 .display 更改为'block'。
如果您实际调试一下功能，就可以自己看到查看它是否被调用并测试该 .display 属性的值-您可以在此处看到： http://jsfiddle.net/uLjxp3ha/ （注意：我不建议将 alert（） s用于
检查由样式表规则设置的当前可见性有些棘手，因为它在浏览器之间无法一致工作。您可能需要测试是否存在 .currentStyle 和 .getComputedStyle（） 允许当前浏览器支持的任何一种。请查看此答案以了解有关该问题的更多信息。
但是在您的情况下，如果您知道，则复选框是隐藏的，因此您可以简单地将if / else反转：
if（node_list [i] .style.display =='block'）{
node_list [i] .style.display ='none';
} else {
node_list [i] .style.display =‘block’;
}
.display 不会以'block'开始，因此将执行else并显示元素。
演示： http://jsfiddle.net/uLjxp3ha/1/
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.
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?
What I think is happening is that your click handler is being called on the first click, but your if test isn't working the way you expect. This line:
if(node_list[i].style.display == 'none')
...is testing whether the element has an inline style set. Which it doesn't: it's hidden via a CSS rule that applies to all such inputs. So then your else case executes and the .display is set to 'none'. Then on the next click, the if works as expected and changes .display to 'block'.
You can see this for yourself if you actually debug your function a little to see if it is getting called and test the value of that .display property - as you can see here: http://jsfiddle.net/uLjxp3ha/ (note: I don't recommend alert()s for debugging).
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 .currentStyle and .getComputedStyle() to allow for whichever one the current browser might support. Have a look at this answer to another question for more information about that.
But in your case given that you know the checkboxes are hidden to begin with you can simply invert your if/else:
if(node_list[i].style.display == 'block') {
node_list[i].style.display = 'none';
} else {
node_list[i].style.display = 'block';
}
The .display will not be 'block' to start with, so the else will be executed and the elements will be displayed.
Demo: http://jsfiddle.net/uLjxp3ha/1/
这篇关于第一次单击时按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
