为什么我的onClick函数需要两次点击

Question

我从我的一些不同的项目中注意到,每当我点击一些东西时我都会添加一个onClick函数,它总是需要两次点击才能在页面刚刚加载时让它们运行.我用它们的一般结构是:

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**/

然后我在html中调用它的方式是

<div class="some_class" id="start_btn" onClick="PageChange()">!!!LETS GET STARTED!!!</div>

这也是一个小提琴. https://jsfiddle.net/Optiq/42e3juta/

这通常是我每次想要创建此功能时的结构.我在这里看到了很多其他关于他们的项目的帖子,他们点击2次点击激活,但他们都没有做任何接近我想要完成的事情,看起来他们的问题在他们的编码中.有人知道为什么会这样吗？

Answer 1

这是因为您在单击按钮时将事件处理程序附加到按钮上.
这意味着只需单击该按钮即可激活事件处理程序,而不会激活其中的代码.start.onclick=function() {
然后,由于事件处理程序已被激活,第二次单击将起作用,现在代码将运行.

尝试将代码移出函数,然后只需单击一下即可