Javascript未按預期切換div

Question

我無法弄清楚為什么這種方法行不通，因為我只是整理一些我已經可以正常使用的代碼。 我創建了一個JavaScript函數，將不同div的顯示屬性從塊切換為無。 簡而言之，它是模擬問卷中的頁面更改。 我檢查了控制台，沒有看到任何彈出消息。

到目前為止，這是一個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>

Java腳本

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為：歡迎，它引起了錯誤。

Answer 2

Javascript是區分大小寫的語言。

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

演示：

 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>