Button does not work on first click

Question

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>

Run codeHide result

When the page loads for the first time, and I click on the button the first time, it does not launch the onclick function. If I click on it, sleepy time will trigger an event.

Other buttons fire an event on the first click without any problems. Does anyone know what the problem was, or did he have the same thing?

Answer 1

I think that it happens that your click handler is called on the first click, but your test ifdoes not work as you expect. This line:

if(node_list[i].style.display == 'none')

... , . : CSS, . , else , .display - 'none'. if .display 'block'.

, , , .display, : http://jsfiddle.net/uLjxp3ha/ (: alert() ).

, stylesheet, , . , .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/

Answer 2

: "style", . "", fork "" "none"

,

• window.getComputedStyle(node_list [i]). display == "none"

• "if"

  if (node_list [i].style.display == 'block')   node_list [i].style.display = 'none'; else node_list [i].style.display = 'block';

https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle

Answer 3

, . css javascript.

, check : . , .

, :

node_list[i].classList.toggle('check-hidden');

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>

Hide result

Answer 4

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'; }
    }
}

( jQuery)

    function showCheckbox(){

    $( "input.check" ).each(function() {
        if ($(this).css('display') == 'none'){
            $(this).css('display','block')
        } else {
            $(this).css('display','none')
        }
    });
}