javascript - why do my onClick functions take two clicks -

i've noticed few different projects of mine whenever click add onclick function to, takes 2 clicks them going when page freshly loaded. general structure use them is:

function pagechange(){      var welc_p = document.getelementbyid("welcome");/**gathers page divs**/     var page01 = document.getelementbyid("page01");     var page02 = document.getelementbyid("page02");      var start = document.getelementbyid("start_btn");/**gathers buttons**/     var p1_back = document.getelementbyid("p1_back");     var p1_next = document.getelementbyid("p1_back");      var p2_back = document.getelementbyid("p2_back");     var p2_next = document.getelementbyid("p2_back");      start.onclick=function(){         page01.style.display="block";         welc_p.style.display="none";         window.location="#page01";         };      }/**function**/ 

then way call in html is

<div class="some_class" id="start_btn" onclick="pagechange()">!!!lets started!!!</div> 

here's fiddle of well. https://jsfiddle.net/optiq/42e3juta/

this how structure each time want create functionality. i've seen tons of other posts on here items taking 2 clicks activate none of them doing near trying accomplish , seemed problem within coding. know why happening?

this because attatching event handler button on click of button.
means 1 click of button activates event handler, not code within start.onclick=function() {
then, second click works becasue event handler has been activated, , code run.

try moving code out of function, work 1 click