Javascript未按预期切换div

Question

I can't figure out why this won't work as I'm just tidying up some coding I already had working fine. I created a javascript function to toggle the display attribute of different divs from block to none. In a nutshell it's to simulate page changes in my questionnaire. I checked the console and didn't see anything pop up.

Here's a JSFiddle of it so far. 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

Update the JS code with this it will work:

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

in HTML the div id is : wlecome, it caused the error.

Answer 2

Javascript is case sensitive language.

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

Demo:

 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(){ alert('clicked'); // wont show up on StackOverflow due to policy this.innerHTML ="clicked start"; // so changed content to assert welc_p.style.display="none"; page01.style.display="block"; window.location="#MainPage"; }; }//window onload// 

 /*MAIN ELEMENTS*/ header{ width:100%; height:40px; margin:auto; display:block; background-image:url(http://optiqvision.x10host.com/Pics/header.png); position:fixed; z-index:4; } body{ width:100%; height:100%; /*width:1266px; height:612px;*/ background-color:#161616; background-image:url(http://optiqvision.x10host.com/Pics/Background.png); /*background-position:top 40px center;*/ background-position:50% 40px; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; margin:auto; position:relative; display:block; top:40px; z-index:1; } footer{ width:100%; height:40px; margin:auto; display:block; background-image:url(http://optiqvision.x10host.com/Pics/footer.png); z-index:4; } #MainPage { width:77%; height:auto; margin:auto; border-radius:11px; background: rgba(27, 27, 27, .88); display:block; } /*PAGE FRAMES*/ #welcome{ width:100%; height:1768px; margin:auto; display:block; } #page01{ width:100%; height:1280px; margin:auto; display:none; } /*LOGIC FRAMES*/ /*CONTENT ELEMENTS*/ .title01{ width:auto; height:auto; font-family:'Oswald', sans-serif; font-size:11vw; color:#ffff00; text-align:center; display:block; } @media (max-width:1266px) { .title01{font-size:11vw} } .sub_title01{ width:100%; height:auto; font-family:'Oswald', sans-serif; font-size:16pt; color:#ffff00; text-align:center; display:block; } /*GADGETS*/ 

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