button activated on the second click

i have to click twice to activate the button, here is my HTML code

<button id="bt" on="false" onclick="onOf()">
      display
</button>

 <div id="bookmark" style="visibility: hidden">

and the js code:

function onOf() {
 if (document.getElementById("bt").on == "false") {
  document.getElementById("bt").on = "true";
  document.getElementById("bt").innerHTML = "hide";
  document.getElementById("bookmark").style.visibility = "visible";
}else{
  document.getElementById("bt").on = "false";
  document.getElementById("bt").innerHTML = "display";
  document.getElementById("bookmark").style.visibility = "hidden";
 }
}

the button should hide and display a div on every click, acutally it works but the first click has no effect