以innerHTML生成的元素爲目標

Question

我有一個<div>，它在點擊某些按鈕時動態生成其內容。我在switch語句中使用element.innerHTML來切換<div>的內容。

我的問題是，我想訪問一些由element.innerHTML生成的元素，但我不能。

我正在更改id="container"中的文字。對於requSubmit的情況，我需要從案例requirements的用戶那裏獲得輸入來計算某些內容，但我不能，因爲我已經使用了innerHTML。

HTML：

<div id="globalContainer"> 

<div id="container" class="individualScene"> 
<form name="introForm"> 
<h1>InteractNet brings you:</h1> 
<p><b>The way to get to INTERACTIVE MEDIA PRODUCTION</b></p> 
<p>Follow the guidelines carefully</p> 
<p>Enter your name below and click start to proceed</p> 
<p><input type="text" name="username"></p> 
<p><input type="button" value="Start" style="visibility:hidden;"></p> 
</form>  
</div> 

<div id="allButtons"> 

     <a href="#" class="buttonLinks"><span id="startBtn" onClick="show('start')" class="eachButton">Start</span></a> 


       <a href="#" class="buttonLinks"><span id="requirementsBtn" onClick="show('requirements')" class="eachButton" style="display: none;">Requirements</span></a> 

        <a href="#" class="buttonLinks"><span id="requSubmitBtn" onClick ="show('requSubmit'); countCheckboxes();" class="eachButton" style="display: none;">Submit</span></a> 

       <a href="#" class="buttonLinks"><span id="portfolioBtn" onClick="show('portfolio')" class="eachButton" style="display: none;">Portfolio</span></a> 


         <a href="#" class="buttonLinks"><span id="LOMBtn" onClick="show('letterOfMot')" class="eachButton" style="display: none;">Letter of Motivation</span></a> 

          <a href="#" class="buttonLinks"><span id="LOMSubmitBtn" class="eachButton" style="display: none;">Submit</span></a> 



         <a href="#" class="buttonLinks"><span id="artworkBtn" onClick="show('artwork')" class="eachButton" style="display: none;">Best pieces</span></a> 

          <a href="#" class="buttonLinks"><span id="artworkSubmitBtn" class="eachButton" style="display: none;">Submit</span></a> 

        <a href="#" class="buttonLinks"><span id="onlineProfileBtn" onClick="show('onlineProfile')" class="eachButton" style="display: none;">Online Profile</span></a> 

          <a href="#" class="buttonLinks"><span id="onlineProfSubmitBtn" class="eachButton" style="display: none;">Submit</span></a> 


       <a href="#" class="buttonLinks"><span id="courseInfoBtn" onClick="show('courseInfo')" class="eachButton" style="display: none;">Course Info</span></a> 


         <a href="#" class="buttonLinks"><span id="multimediaDesignBtn" onClick="show('multimediaDesign')" class="eachButton" style="display: none;">Multimedia Design</span></a> 

          <a href="#" class="buttonLinks"><span id="photoshopBtn" class="eachButton" style="display: none;"><img src="workingImg/psIcon.png" width="30" height="29" alt="" align="absmiddle"> Photoshop</span></a> 
          <a href="#" class="buttonLinks"><span id="illustratorBtn" class="eachButton" style="display: none;"><img src="workingImg/aiIcon.png" width="30" height="29" alt="" align="absmiddle"> Illustrator</span></a> 


         <a href="#" class="buttonLinks"><span id="webCodingBtn" onClick="show('webCoding')" class="eachButton" style="display: none;">Web Coding</span></a> 

          <a href="#" class="buttonLinks"><span id="xhtmlBtn" class="eachButton" style="display: none;">XHTML</span></a> 
          <a href="#" class="buttonLinks"><span id="cssBtn" class="eachButton" style="display: none;">CSS</span></a> 
          <a href="#" class="buttonLinks"><span id="flashBtn" class="eachButton" style="display: none;">Flash</span></a> 
          <a href="#" class="buttonLinks"><span id="processingBtn" class="eachButton" style="display: none;">Processing</span></a> 
          <a href="#" class="buttonLinks"><span id="phpBtn" class="eachButton" style="display: none;">Php</span></a> 


        <a href="#" class="buttonLinks"><span id="websitesBtn" onClick="show('websites')" class="eachButton" style="display: none;">Websites</span></a> 
        <a href="#" class="buttonLinks"><span id="mobsitesBtn" onClick="show('mobsites')" class="eachButton" style="display: none;">Mobsites</span></a> 
        <a href="#" class="buttonLinks"><span id="standaloneSitesBtn" onClick="show('standaloneSites')" class="eachButton" style="display: none;">Standalone sites</span></a> 

         <a href="#" class="buttonLinks"><span id="onlineGamesBtn" onClick="show('onlineGames')" class="eachButton" style="display: none;">Online Games</span></a> 

          <a href="#" class="buttonLinks"><span id="cssJsBtn" class="eachButton" style="display: none;">CSS3 &amp; JavaScript</span></a> 
          <a href="#" class="buttonLinks"><span id="processingGameBtn" class="eachButton" style="display: none;">Processing</span></a> 



         <a href="#" class="buttonLinks"><span id="shortAnimationsBtn" onClick="show('shortAnimations')" class="eachButton" style="display: none;">Short Animations</span></a> 

         <a href="#" class="buttonLinks"><span id="htmlCssAnimBtn" class="eachButton" style="display: none;">HTML5 &amp; CSS3</span></a> 
         <a href="#" class="buttonLinks"><span id="JsAnimBtn" class="eachButton" style="display: none;">JavaScript</span></a> 

    <a href="#" class="buttonLinks"><span id="restartBtn" onClick="show('restart')" class="eachButton">Restart</span></a> 
</div> 

的Javascript：

function show(page){ 

var container = document.getElementById("container"); 
var content = ""; 



switch(page) 
{ 

    case "start": 
    username = String(document.introForm.username.value); 
    content = "<h1>Hello, <span id=\"displayUsername\" class=\"usernameDisplayed\">" + username + "</span></h1> <p>Getting to a Production Programme is like skating in a park. You need to overcome obstacles to get to you destination. The three main obstacles are listed below. Choose which one you want to overcome first.</p><p>What would you like to do?</p><p>Check if you meet the <input type=\"button\" value=\"Requirements\" style=\"visibility:hidden; width:110px;\">?</p><p>See what you need for your <input type=\"button\" value=\"Portfolio\" style=\"visibility:hidden; width:75px;\">?</p><p>Have a look at the <input type=\"button\" value=\"Course Info\" style=\"visibility:hidden; width:90px;\">?</p>"; 

    container.style.height = "350px"; 
    document.getElementById('startBtn').style.display = "none"; 
    document.getElementById('requirementsBtn').style.display = ""; 
    document.getElementById("requSubmitBtn").style.display = "none"; 
    document.getElementById('portfolioBtn').style.display = ""; 
    document.getElementById("LOMBtn").style.display = "none"; 
    document.getElementById("artworkBtn").style.display = "none"; 
    document.getElementById("onlineProfileBtn").style.display = "none"; 
    document.getElementById("onlineProfSubmitBtn").style.display = "none"; 
    document.getElementById('courseInfoBtn').style.display = ""; 
    break; 

    case "requirements": 

    content = "<form name=\"countCheckboxForm\" id=\"countCheckboxForm\"><p>You need to have passed at <b>least six</b> semester courses last year.</p><p>Tick the boxes for YES and skip it for NO.</p><p><b>Did you pass:</b></p><p>FAM1001F? <input type=\"checkbox\" name=\"ticked[]\" value=\"fam1001f\" onclick=\"countCheckboxes()\"></p><p>FAM1000S? <input type=\"checkbox\" name=\"ticked[]\" value=\"fam1000s\" onclick=\"countCheckboxes()\"></p><p>How many more courses have you passed?<br><input type=\"text\" name=\"moreCourses\"> [Enter a number]</p><p>[Note: You need to pass FAM2000F and/or FAM2004F as well.]</p><p><input type=\"button\" value=\"Submit\" onClick=\"countCheckboxes()\" style=\"visibility:hidden;\"></p><h2>You have passed <span id=\"checkboxCount\"></span> courses</h2></div>"; 


    document.getElementById('startBtn').style.display = "none"; 
    document.getElementById('requirementsBtn').style.display = "none"; 
    document.getElementById("requSubmitBtn").style.display = ""; 
    document.getElementById('portfolioBtn').style.display = "none"; 
    document.getElementById("LOMBtn").style.display = "none"; 
    document.getElementById("artworkBtn").style.display = "none"; 
    document.getElementById("onlineProfileBtn").style.display = "none"; 
    document.getElementById("onlineProfSubmitBtn").style.display = "none"; 
    document.getElementById('courseInfoBtn').style.display = "none"; 
    break; 

    case "requSubmit":    
    content = "<h2>You have passed <span id=\"checkboxCount\">" + coursesPassed + "</span> courses</h2></div>" ; 
    break; 


    case "portfolio": 
    content = "<h1>Portfolio</h1><p>A <b>strong portfolio increases your chances</b> of being selected.</p><p>You will need:</p><p>--> To write a <button title=\"See how to write it\" style=\"visibility:hidden;\">letter of motivation</button></p><p>--> 3 - 5 of your <button title=\"See the kinds of appropriate works\"style=\"visibility:hidden; width:85px;\">best pieces</button> of work</p><p>A Digital Profile on CD/DVD or an <button title=\"See examples of Online Profiles\" style=\"visibility:hidden; width:105px;\">Online Profile</button> will be an advantage</p>"; 

    document.getElementById('startBtn').style.display = "none"; 
    document.getElementById('requirementsBtn').style.display = "none"; 
    document.getElementById("requSubmitBtn").style.display = "none"; 
    document.getElementById('portfolioBtn').style.display = "none"; 
    document.getElementById("LOMBtn").style.display = ""; 
    document.getElementById("artworkBtn").style.display = ""; 
    document.getElementById("onlineProfileBtn").style.display = ""; 
    document.getElementById("onlineProfSubmitBtn").style.display = "none"; 
    document.getElementById('courseInfoBtn').style.display = "none"; 
    break; 

    case "letterOfMot": 
    content = "<h1>Letter of Motivation</h1><p><b>Introduce yourself</b> - <br>--> Say who you are, <br>--> Why you should be considered/selected<br>--> Write about that internship that you did<br><br><textarea rows=\"10\" cols=\"35\">Start writing it down here...</textarea></p><p><b>Write about your interests.</b></p><p>Tick the ones you are interested in:</p><p>Blogging <input type=\"checkbox\"></p><p>Vlogging <input type=\"checkbox\"></p><p>Gaming <input type=\"checkbox\"></p><p>Animation <input type=\"checkbox\"></p><p>Google Hacks <input type=\"checkbox\"></p><p><textarea rows=\"10\" cols=\"35\">Add more to the list...</textarea><p><button style=\"visibility:hidden;\">Submit</button></p>"; 

    container.style.height = "850px"; 
    container.style.backgroundImage = "url(workingImg/letterOfMot.jpg)"; 

    document.getElementById('startBtn').style.display = "none"; 
    document.getElementById('requirementsBtn').style.display = "none"; 
    document.getElementById("requSubmitBtn").style.display = "none"; 
    document.getElementById('portfolioBtn').style.display = "none"; 
    document.getElementById("LOMBtn").style.display = "none"; 
    document.getElementById("LOMSubmitBtn").style.display = ""; 
    document.getElementById("artworkBtn").style.display = "none"; 
    document.getElementById("onlineProfileBtn").style.display = "none"; 
    document.getElementById("onlineProfSubmitBtn").style.display = "none"; 
    document.getElementById('courseInfoBtn').style.display = "none"; 
    break; 

    case "artwork": 
    content = "<h1>Artworks you can submit</h1><p>Find some types of artworks you can add to your portfolio. Tick the boxes for the ones you have.</p><h3>Drawings</h3><figure style=\"display:inline;\"><img src=\"newImg/manga1.jpg\" width=\"60\" height=\"93\" /> <img src=\"newImg/manga1.jpg\" width=\"60\" height=\"93\" /> <img src=\"newImg/manga1.jpg\" width=\"60\" height=\"93\" /></figure><br><input type=\"checkbox\"><hr><h3>Photography</h3><input type=\"checkbox\"><hr><h3>Paintings</h3><input type=\"checkbox\"><hr><h3>Articles for Web</h3><input type=\"checkbox\"><hr><h3>Short Animations</h3><input type=\"checkbox\"><hr><h3>Digital Graphics</h3><p>Photoshop | Illustrator | Other editing programs</p><input type=\"checkbox\"><hr><p><button style=\"visibility:hidden;\">Submit</button></p>"; 

    container.style.height = "825px"; 

    document.getElementById('startBtn').style.display = "none"; 
    document.getElementById('requirementsBtn').style.display = "none"; 
    document.getElementById("requSubmitBtn").style.display = "none"; 
    document.getElementById('portfolioBtn').style.display = "none"; 
    document.getElementById("LOMBtn").style.display = "none"; 
    document.getElementById("LOMSubmitBtn").style.display = "none"; 
    document.getElementById("artworkBtn").style.display = "none"; 
    document.getElementById("artworkSubmitBtn").style.display = ""; 
    document.getElementById("onlineProfileBtn").style.display = "none"; 
    document.getElementById("onlineProfSubmitBtn").style.display = "none"; 
    document.getElementById('courseInfoBtn').style.display = "none"; 
    break; 

    case "onlineProfile": 
    content = "<h1>Online Profile</h1><p>Having one can turn to your advantage. It can be where you share some of your creative works like:</p><p><input type=\"checkbox\"> <a href=\"http://usheekan.deviantart.com\" target=\"_blank\" title=\"View an example\">DeviantArt</a></p><p><input type=\"checkbox\"> <a href=\"http://www.flickr.com/explore\" target=\"_blank\" title=\"Go to Flickr\">Flickr</a></p><p>or, it can also be in the form of:</p><p><input type=\"checkbox\"> Blog(s)</p><p><button style=\"visibility:hidden;\">Submit</button></p>"; 

    container.style.height = "300px"; 

    document.getElementById('startBtn').style.display = "none"; 
    document.getElementById('requirementsBtn').style.display = "none"; 
    document.getElementById("requSubmitBtn").style.display = "none"; 
    document.getElementById('portfolioBtn').style.display = "none"; 
    document.getElementById("LOMBtn").style.display = "none"; 
    document.getElementById("LOMSubmitBtn").style.display = "none"; 
    document.getElementById("artworkBtn").style.display = "none"; 
    document.getElementById("artworkSubmitBtn").style.display = "none"; 
    document.getElementById("onlineProfileBtn").style.display = "none"; 
    document.getElementById("onlineProfSubmitBtn").style.display = ""; 
    document.getElementById('courseInfoBtn').style.display = "none"; 
    break; 

    case "courseInfo": 
    content ="<h1>Interactive Media Course Info</h1><p>The course will give you a foundation in <button style=\"visibility:hidden; width:140px;\">multimedia design</button> and <button style=\"visibility:hidden; width:97px;\">web coding</button> skills.</p><p>You will be taught to design and develop <button style=\"visibility:hidden;\">websites</button> and <button style=\"visibility:hidden;\">mobsites</button> (sites optimized for cellphones).</p><p>Projects include:</p><p><button style=\"visibility:hidden;\">Standalone sites</button> <button style=\"visibility:hidden;\">Online Games</button> <button style=\"visibility:hidden;\">Short Animations</button></p><br><p>Click on any of the buttons above to learn more about the topic.</p>"; 

    container.style.height = "465px"; 
    document.getElementById('startBtn').style.display = "none"; 
    document.getElementById('requirementsBtn').style.display = "none"; 
    document.getElementById("requSubmitBtn").style.display = "none"; 
    document.getElementById('portfolioBtn').style.display = "none"; 
    document.getElementById("LOMBtn").style.display = "none"; 
    document.getElementById("LOMSubmitBtn").style.display = "none"; 
    document.getElementById("artworkBtn").style.display = "none"; 
    document.getElementById("artworkSubmitBtn").style.display = "none"; 
    document.getElementById("onlineProfileBtn").style.display = "none"; 
    document.getElementById("onlineProfSubmitBtn").style.display = "none"; 
    document.getElementById('courseInfoBtn').style.display = "none"; 
    document.getElementById('multimediaDesignBtn').style.display = ""; 
    document.getElementById('webCodingBtn').style.display = ""; 
    document.getElementById('websitesBtn').style.display = ""; 
    document.getElementById('mobsitesBtn').style.display = ""; 
    document.getElementById('standaloneSitesBtn').style.display = ""; 
    document.getElementById('onlineGamesBtn').style.display = ""; 
    document.getElementById('shortAnimationsBtn').style.display = ""; 


    break; 

    case "multimediaDesign": 
    content ="<h1>Multimedia Design</h1><p>You will be introduced to Adobe <button style=\"visibility:hidden;\"><img src=\"newImg/psIcon.png\" width=\"30\" height=\"29\" alt=\"\" align=\"absmiddle\" /> Photoshop</button> and <button style=\"visibility:hidden;\"><img src=\"newImg/aiIcon.png\" width=\"30\" height=\"29\" alt=\"\" align=\"absmiddle\" /> Illustrator</button>.</p><p>This will allow you to edit images and create graphics that you will be using on the websites you create.</p><br><p>Learn more:</p><p><button>Web Coding</button> <button>Interactive sites</button> <button>Mobi sites</button> <button>Online Games</button> <button>Animations</button></p><p><button>Portfolio</button></p><p><button>Requirements</button>"; 

    document.getElementById('multimediaDesignBtn').style.display = "none"; 
    document.getElementById('webCodingBtn').style.display = "none"; 
    document.getElementById('websitesBtn').style.display = "none"; 
    document.getElementById('mobsitesBtn').style.display = "none"; 
    document.getElementById('standaloneSitesBtn').style.display = "none"; 
    document.getElementById('onlineGamesBtn').style.display = "none"; 
    document.getElementById('shortAnimationsBtn').style.display = "none"; 
    document.getElementById('photoshopBtn').style.display = ""; 
    document.getElementById('illustratorBtn').style.display = ""; 


    break; 

    case "webCoding": 
    content ="<h1>Web Coding</h1><p>This part will focus on:</p><p><button class=\"inlineButtons\" style=\"visibility:hidden;\">XHTML</button> <button class=\"inlineButtons\" style=\"visibility:hidden;\">Css</button></p><p>You will also get an introduction to:</p><p><button class=\"inlineButtons\" style=\"visibility:hidden;\">Flash</button><button class=\"inlineButtons\" style=\"visibility:hidden;\">Processing</button><button class=\"inlineButtons\" style=\"visibility:hidden;\">Php</button></p><br><p>Learn more:</p><p><button>multimedia Design</button> <button>Interactive sites</button> <button>Mobi sites</button> <button>Online Games</button> <button>Animations</button></p><p><button>Portfolio</button></p><p><button>Requirements</button>"; 

    container.style.height = "530px"; 

    document.getElementById('multimediaDesignBtn').style.display = "none"; 
    document.getElementById('webCodingBtn').style.display = "none"; 
    document.getElementById('websitesBtn').style.display = "none"; 
    document.getElementById('mobsitesBtn').style.display = "none"; 
    document.getElementById('standaloneSitesBtn').style.display = "none"; 
    document.getElementById('onlineGamesBtn').style.display = "none"; 
    document.getElementById('shortAnimationsBtn').style.display = "none"; 
    document.getElementById('photoshopBtn').style.display = "none"; 
    document.getElementById('illustratorBtn').style.display = "none"; 
    document.getElementById('xhtmlBtn').style.display = ""; 
    document.getElementById('cssBtn').style.display = ""; 
    document.getElementById('flashBtn').style.display = ""; 
    document.getElementById('processingBtn').style.display = ""; 
    document.getElementById('phpBtn').style.display = ""; 
    break; 

    case "websites": 
    content ="<h1>Websites Examples</h1><p>Here are examples of websites of current and former Interactive Media students</p><p>This could have been your creations</p><p><button>Example1</button> <button>Example2</button></p><br><p>Learn more:</p><p><button>Web Coding</button> <button>Interactive sites</button> <button>Mobi sites</button> <button>Online Games</button> <button>Animations</button></p><p><button>Portfolio</button></p><p><button>Requirements</button>"; 

    container.style.height = "400px"; 

    document.getElementById('multimediaDesignBtn').style.display = "none"; 
    document.getElementById('webCodingBtn').style.display = "none"; 
    document.getElementById('websitesBtn').style.display = "none"; 
    document.getElementById('mobsitesBtn').style.display = "none"; 
    document.getElementById('standaloneSitesBtn').style.display = "none"; 
    document.getElementById('onlineGamesBtn').style.display = "none"; 
    document.getElementById('shortAnimationsBtn').style.display = "none"; 
    document.getElementById('xhtmlBtn').style.display = "none"; 
    document.getElementById('cssBtn').style.display = "none"; 
    document.getElementById('flashBtn').style.display = "none"; 
    document.getElementById('processingBtn').style.display = "none"; 
    document.getElementById('phpBtn').style.display = "none"; 
    break; 

    case "mobsites": 
    content = "<h1>Mobi Sites</h1><p>These are websites optimized for mobile devices such as cellphones, tablets and computer screens of different dimensions.</p><p><button>Example1</button> <button>Example2</button></p><br><p>Learn more:</p><p><button>Multimedia Design</button> <button>Web Coding</button> <button>Interactive sites</button> <button>Online Games</button> <button>Animations</button></p><p><button>Portfolio</button></p><p><button>Requirements</button>"; 

    document.getElementById('multimediaDesignBtn').style.display = "none"; 
    document.getElementById('webCodingBtn').style.display = "none"; 
    document.getElementById('websitesBtn').style.display = "none"; 
    document.getElementById('mobsitesBtn').style.display = "none"; 
    document.getElementById('standaloneSitesBtn').style.display = "none"; 
    document.getElementById('onlineGamesBtn').style.display = "none"; 
    document.getElementById('shortAnimationsBtn').style.display = "none"; 
    document.getElementById('xhtmlBtn').style.display = "none"; 
    document.getElementById('cssBtn').style.display = "none"; 
    document.getElementById('flashBtn').style.display = "none"; 
    document.getElementById('processingBtn').style.display = "none"; 
    document.getElementById('phpBtn').style.display = "none"; 
    break; 

    case "standaloneSites": 
    content ="<h1>Standalone Sites</h1><p><button>Example1</button> <button>Example2</button></p><br><p>Learn more:</p><p><button>Web Coding</button> <button>Interactive sites</button> <button>Mobi sites</button> <button>Online Games</button> <button>Animations</button></p><p><button>Portfolio</button></p><p><button>Requirements</button>"; 

    document.getElementById('multimediaDesignBtn').style.display = "none"; 
    document.getElementById('webCodingBtn').style.display = "none"; 
    document.getElementById('websitesBtn').style.display = "none"; 
    document.getElementById('mobsitesBtn').style.display = "none"; 
    document.getElementById('standaloneSitesBtn').style.display = "none"; 
    document.getElementById('onlineGamesBtn').style.display = "none"; 
    document.getElementById('shortAnimationsBtn').style.display = "none"; 
    document.getElementById('xhtmlBtn').style.display = "none"; 
    document.getElementById('cssBtn').style.display = "none"; 
    document.getElementById('flashBtn').style.display = "none"; 
    document.getElementById('processingBtn').style.display = "none"; 
    document.getElementById('phpBtn').style.display = "none"; 
    break; 

    case "onlineGames": 
    content = "<h1>Online Games</h1><p>Interactive Media will allow you to create simple online games with:</p><p><button class=\"inlineButtons\" style=\"visibility:hidden;\">CSS3 &amp; JavaScript</button><button class=\"inlineButtons\" style=\"visibility:hidden;\">Processing</button></p><br><p>Learn more:</p><p><button>Multimedia Design</button> <button>Web Coding</button> <button>Interactive sites</button> <button>Mobi sites</button> <button>Animations</button></p><p><button>Portfolio</button></p><p><button>Requirements</button>"; 

    document.getElementById('multimediaDesignBtn').style.display = "none"; 
    document.getElementById('webCodingBtn').style.display = "none"; 
    document.getElementById('websitesBtn').style.display = "none"; 
    document.getElementById('mobsitesBtn').style.display = "none"; 
    document.getElementById('standaloneSitesBtn').style.display = "none"; 
    document.getElementById('onlineGamesBtn').style.display = "none"; 
    document.getElementById('shortAnimationsBtn').style.display = "none"; 
    document.getElementById('xhtmlBtn').style.display = "none"; 
    document.getElementById('cssBtn').style.display = "none"; 
    document.getElementById('flashBtn').style.display = "none"; 
    document.getElementById('processingBtn').style.display = "none"; 
    document.getElementById('phpBtn').style.display = "none"; 
    document.getElementById('cssJsBtn').style.display = ""; 
    document.getElementById('processingGameBtn').style.display = ""; 
    break; 

    case "shortAnimations": 
    content ="<h1>Animations</h1><p>You will be able to create simple short animations with <button style=\"visibility:hidden; width:110px;\">HTML5 &amp; CSS3</button> and more advanced ones with <button style=\"visibility:hidden; width:95px;\">JavaScript</button>.</p><br><p>Learn more:</p><p><button>Multimedia Design</button> <button>Web Coding</button> <button>Interactive sites</button> <button>Mobi sites</button> <button>Online Games</button></p><p><button>Portfolio</button></p><p><button>Requirements</button>"; 

    document.getElementById('multimediaDesignBtn').style.display = "none"; 
    document.getElementById('webCodingBtn').style.display = "none"; 
    document.getElementById('websitesBtn').style.display = "none"; 
    document.getElementById('mobsitesBtn').style.display = "none"; 
    document.getElementById('standaloneSitesBtn').style.display = "none"; 
    document.getElementById('onlineGamesBtn').style.display = "none"; 
    document.getElementById('shortAnimationsBtn').style.display = "none"; 
    document.getElementById('xhtmlBtn').style.display = "none"; 
    document.getElementById('cssBtn').style.display = "none"; 
    document.getElementById('flashBtn').style.display = "none"; 
    document.getElementById('processingBtn').style.display = "none"; 
    document.getElementById('phpBtn').style.display = "none"; 
    document.getElementById('htmlCssAnimBtn').style.display = ""; 
    document.getElementById('JsAnimBtn').style.display = ""; 
    break; 

    case "restart": 
    content = "<form name=\"introForm\"><h1>InteractNet brings you:</h1><p><b>The way to get to INTERACTIVE MEDIA PRODUCTION</b></p><p>Follow the guidelines carefully</p><p>Enter your name below and click start to proceed</p><p><input type=\"text\" name=\"username\"></p><p><input type=\"button\" value=\"Start\" onClick=\"displayUsername()\" style=\"visibility:hidden;\"></p></form>"; 

    container.style.height = "275px"; 

    document.getElementById('startBtn').style.display = ""; 
    document.getElementById("requSubmitBtn").style.display = "none"; 
    document.getElementById('portfolioBtn').style.display = "none"; 
    document.getElementById("onlineProfSubmitBtn").style.display = "none"; 
    document.getElementById('multimediaDesignBtn').style.display = "none"; 
    document.getElementById('webCodingBtn').style.display = "none"; 
    document.getElementById('websitesBtn').style.display = "none"; 
    document.getElementById('mobsitesBtn').style.display = "none"; 
    document.getElementById('standaloneSitesBtn').style.display = "none"; 
    document.getElementById('onlineGamesBtn').style.display = "none"; 
    document.getElementById('shortAnimationsBtn').style.display = "none"; 
    document.getElementById('xhtmlBtn').style.display = "none"; 
    document.getElementById('cssBtn').style.display = "none"; 
    document.getElementById('flashBtn').style.display = "none"; 
    document.getElementById('processingBtn').style.display = "none"; 
    document.getElementById('phpBtn').style.display = "none"; 
    break; 

} 
document.getElementById('container').innerHTML = content; 
} 

Answer 1

因爲我們還沒有分配一個ID /類的元素，你不能訪問它。它有一個名字雖然這樣你就可以這樣假設我理解你的問題訪問：

document.getElementsByName("moreCourses")[0].value; 

它會更容易，只是繼續你的約定，雖然它分配一個ID。

此外，你有噸重複的代碼。只是做一個這樣的功能：

function hideThem() { 
    document.getElementById('startBtn').style.display = "none"; 
    document.getElementById('requirementsBtn').style.display = ""; 
    document.getElementById("requSubmitBtn").style.display = "none"; 
    document.getElementById('portfolioBtn').style.display = ""; 
    document.getElementById("LOMBtn").style.display = "none"; 
    document.getElementById("artworkBtn").style.display = "none"; 
    document.getElementById("onlineProfileBtn").style.display = "none"; 
    document.getElementById("onlineProfSubmitBtn").style.display = "none"; 
    document.getElementById('courseInfoBtn').style.display = ""; 
} 

現在你可以直接調用hideThem（）;並通過一條巨大的線條縮短您的代碼。

此外，而不是在字符串中轉義斜槓，只需使用單引號括起HTML。