Javascript 没有按预期切换 div

Question

我不明白为什么这行不通，因为我只是在整理一些我已经可以正常工作的编码。我创建了一个 javascript 函数来将不同 div 的显示属性从 block 切换为无。简而言之就是模拟我问卷中的页面变化。我检查了控制台，没有看到任何弹出信息。

到目前为止，这是它的一个 JSFiddle。 https://jsfiddle.net/Optiq/rao82e0r/1/

HTML

<header></header>

<form action="Send_02.php" method="post">
    <div id="MainPage">

        <div id="wlecome"><!-------------------------------------------------------WELCOME BEGIN------------------------------------------------------->

            <div class="title01">Congratulations</div>
            <div id="exp_content" style="width:92%; height:auto; font-family: 'Poiret One', cursive; font-size:13pt; color:#ffb500; text-align:center; margin:auto; padding:12px; display:block;">

                You just took the most important step you'll ever take towards bringing your Business to life! Completing this questionnaire will give us a solid foundation for building your Company Image and eliminate the guess work from what type of designs will best suit your Company. There's a total of 9 sections which hone in on the most vital aspects of ensuring effectiveness with every action taken with the intent of driving your Business forwards.<br /><br /><br /><br />

                <div class="sub_title01">1.  Contact and Location</div>
            This section outlines your general contact info and location of your Business.<br /><br />

            <div class="sub_title01">2.  General Business Info</div>
            This section outlines the basics of where you currently are with running/starting your business.<br /><br />

            <div class="sub_title01">3.  Your Entrepreneur Philosophy</div>
            This section sheds light onto what type of Entrepreneur you are which helps determine the methods of Business you're most likely to pursue.  Establishing this will help with custom tailoring material to suit your unique ways of doing Business and highlight your personal strengths.<br /><br />

            <div class="sub_title01">4.  Challenges To Triumph</div>
            This section helps identify your personal strengths and their relation to the circumstances you face. This allows us to see what forms of assistance you'll require which helps develop the tools needed for others to be effective and impactful on your behalf.<br /><br />

            <div class="sub_title01">5.  Your Territory</div>
            This section is to outline the specifics of what you have to offer and how it effects people in order to identify which type of playing field you're rooted in.  This helps unravel the best ways for you to reach and fulfill your market through a custom tailored strategy.<br /><br />

            <div class="sub_title01">6.  How People Relate to Your Business</div>
            This section outlines the Customer's perspective of what you have to offer and how they feel about the way you do things in particular.<br /><br />

            <div class="sub_title01">7.  Customer Profiles</div>
            This section allows you to provide detailed information about the different types of Customers you have/plan to cater to.<br /><br />

            <div class="sub_title01">8.  Your Public Impact</div>
            This section goes over the type of relationships you want to build with your market and how you want them to grow.<br /><br />

            <div class="sub_title01">9.  Your Presence</div>
            This section sheds like on how your Business should be projected to the public through the content it provides.<br /><br /><br /><br />

            Some of the questions I ask are a bit unorthodox so if you don't have an answer for some of them !!!DON'T WORRY!!!! simply leave it unchecked or type "undecided" and move on.  This process is more or less a way to get as many peices on the table as possible so we can begin to see what we have and what still needs to be built.<br /><br />

            <div style="width:180px; height:130px; margin:auto; display:block; background-image:url(http://optiqvision.x10host.com/Pics/zipper_mouth.png); background-size:cover;"></div>
            <div style="font-family:'Oswald', sans-serif; color:#c9fffb; font-size:16pt; text-align:center; width:100%; height:auto;">
                YOUR SECRETS ARE SAFE
            </div><br />

            Secrecy is a common concern for many people and I understand dearly.<br /><br/>

            Here at Optiq Vision Advanced Art Development secrecy is devoutly maintained in regards to your plans and sensitive data. Rest assured that your brilliant ideas won't be passed on to someone else and that your name won't wind up on some marketing/spamming list of some sort.<br /><br />

            The only time a client's material is displayed before eyes outside of ours is in the event of presenting case studies and public portfolios in which the Client has given permission to showcase.<br /><br />

            Now that we have that out of the way.<br /><br />
            <div class="sub_title01" id="start_btn">!!!LETS GET STARTED!!!</div>
            <div style="width:100%; height:auto; font-family: 'Roboto', sans-serif; font-size:8pt; margin:auto; display:block;">(click here to begin)</div>

            </div><!--exp_content-->

        </div><!-------------------------------------------------------WELCOME END------------------------------------------------------->

        <div id="page01"><!-------------------------------------------------------PAGE_01 BEGIN------------------------------------------------------->
            Secrecy is a common concern for many people and I understand dearly.<br /><br/>

            Here at Optiq Vision Advanced Art Development secrecy is devoutly maintained in regards to your plans and sensitive data. Rest assured that your brilliant ideas won't be passed on to someone else and that your name won't wind up on some marketing/spamming list of some sort.<br /><br />

            The only time a client's material is displayed before eyes outside of ours is in the event of presenting case studies and public portfolios in which the Client has given permission to showcase.<br /><br />

            Now that we have that out of the way.<br /><br />
        </div><!-------------------------------------------------------PAGE_01 BEGIN------------------------------------------------------->

    </div><!--MainPage-->    
</form>

<footer></footer>

Javascript

window.onload=function(){

    //COLLECTS PAGES
    var welc_p = document.getElementById("welcome");
    var page01 = document.getElementById("page01");

    //COLLECTS BUTTONS
    var start = document.getElementById("start_btn");

    //TOGGLES PAGES
    start.onClick=function(){
        welc_p.style.display="none";
        page01.style.display="block";
        window.location="#MainPage";
        };

}//window onload//

Answer 1

用它来更新 JS 代码:

 document.getElementById("start_btn").addEventListener("click", myFunction);
    function myFunction(){

            //COLLECTS PAGES
            var welc_p = document.getElementById("wlecome");
            var page01 = document.getElementById("page01");

            //COLLECTS BUTTONS


            //TOGGLES PAGES

                welc_p.style.display="none";
                page01.style.display="block";
                window.location="#MainPage";




        }//window onload//

在 HTML 中，div id 是:wlecome，它导致了错误。