JavaScript addEventListener requires 2 clicks to fire function -

There is a small demo of what I'm experiencing:

And here are the code snippets:

HTML:

  & lt; Div id = "frame" & gt; & Lt; Div class = "beed col_a" id = "a1" & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS:

  #frame {status: relative; Height: 205px; } .bead {status: complete; Background: black; Width: 50px; Height: 25px; -image-radius: 50%; -Vibit-boundary-radius: 50%; Limit-Radius: 50%; }. Beed: Hover {background color: white; Limit: 1px solid black; } # A1 {top: 0px; }  

JS:

  var a1 = document.getElementById ("a1"); Function five toggle (bead1) {if (beed 1. style.top === "0 pixels") {bead1.style.top = "25px"; } Else {bead1.style.top = "0px"; }} A1.addEventListener ("click", function () {five toggle (a1);}, false);  

It is an idea that when the click is done, the position of bead is shifted up or downwards. To toggle, in other words but adding the if / else statement to a function that requires a clickable object, before it moves, two clicks are required. After the initial additional click, the bead is desired with a click if I remove the if / else statement from that function which changes the bead and adds the code which it goes without a conditional check only I feel curious as it works. Will someone please explain to me why he behaves like this?

There is no problem with addEventListener, you have to add a condition to || Bead1.style.top == "" Because bead1.style.top is empty by default:

  Function Five Toggle (Beed 1) {if (bead1.style.top = = "0 px" || Beed 1. Style.top == "") {Beed 1. Style = desktop = "25px"; } Else {bead1.style.top = "0px"; }}  

You can set the initial top value to 0px