Button does not function on the first click

Button does not function on the first click

button click not working first time jquery
first click second click javascript
jquery click event fires on second click but not on first
jquery click not working first time
jquery click not working sometimes
jquery button click not working
javascript onclick only works on second click
onclick only works on second click react

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>

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/

Toggle Javascript works on second click, not first - JavaScript, <script language="javascript"> function toggleDiv(divid){ if(document. I've seen weird stuff happen if a css property is not terminated by a ; set #detailspecs to “ display:block;” the button DOES toggle on the first click, changing the display to� Because the first click is window.onclick = function() part which tells the window to define another click event only, and then the real click event will work when you click the second time. Deleting the window click event already suffices. P.S. I don't see why having window click event is meaningful in your code.


Your code is brittle, easy to break. I suggest you to create a clear separation of concerns between css and javascript.

Also, your use of check class was twofold: select elements and hide them. That are two things better managed not coupled to each other.

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.

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>

Button click is not working for first click and working on second click , On first click ,my button is not workingits working on second click..May i know the reason and how to rectify it. Regards. Suresh Kumar G. Even something as simple as a mouse button can fail. If your mouse’s left-click button is sticking, isn’t consistently responding, or is accidentally double-clicking, this often indicates a hardware problem with the mouse. It could be a software issue, however. It’s Probably a Hardware Problem; Here’s How to Check


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"

What you may do is next

  1. Use computed style

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

  2. 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';

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

Issue with submit button not working on the first click, Hi all, I am created very simple form with submit button without any dependency on form but when try to click on submit button it is not submitted on first time. // Get the button, and when the user clicks on it, execute myFunction document.getElementById("myBtn").onclick = function() {myFunction()}; /* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */


The style.display property is not present the first time you do the loop, you could change the code as follows:

    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)

    function showCheckbox(){

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

Button works on second click, not on first click [Solved], Button works on second click, not on first click [Solved] the 1st click: it always takes 2 clicks (but not a double-click) for the button to do what "delay": 0 }; export function compareAll_onClick(event) { if (showing === 'hover')� under button onclick event, click + to create a new entry. in the new entry's gameobject field, drag the "MyScript" object to this field. open the functions menu, your functions will show up. Other things to consider: 1. make sure your script does not have any build errors. 2. make sure your script's functions are public. 3.


Instead of writing display: none in your css file, write it inline in your html document so it'd be more like:

<input style="display: none" type="checkbox" class="check" />

button onclick not working on first click, Because the first click is window.onclick = function() part which tells the window to define another click event only, and then the real click event will work when� Right-click on the taskbar and choose Task Manager. Right-click on the start menu button and choose Task Manager. Press the [CTRL] + [ALT] + [DELETE] keys on your keyboard and choose Task Manager. 2. Click on More details located in the bottom left corner of the Windows Task Manager window. 3. In the Processes tab, you click on Start to select


Introduction to browser events, All DOM nodes generate such signals (but events are not limited to input id = " elem " type = " button " value = " Click me " > < script > elem . onclick = function In the first example, the HTML attribute is used to initialize the� Dear All, I presume some of you are familiar with the start button right click failure. I run Windows 2004, version 20175.1000 (pre-release 200717.1349). The failure of the right-click to work on the start button is an issue I've faced a few times.


Need help figuring out why a JavaScript button onclick is not working, But when I load my page and click the GO button it just reloads my sharepoint page and does not perform the redirect. I have tried replacing the� As a result, the else block is executed and you end up displaying Celsius. Unfortunately, this is the default block which is shown, so the first click doesn't do anything. The second click works because after the code executes once, now both div blocks have a style attribute.


How to Fix Mouse Left-click Malfunction in Windows, Likewise, its non-functioning is one of the most common PC problems There could be dozens of reasons why left-click may not be working properly or on the mouse and follow the instructions using the keyboard buttons.