定位innerHTML生成的元素

Question

我有一个<div>，它会在点击某些按钮时动态生成其内容。我在element.innerHTML语句中使用switch来切换<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 / class，因此无法访问它。它有一个名称，所以你可以这样访问它，假设我理解你的问题：

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。