特定のボタンを<div>クリックすると、コンテンツが動的に生成される があります。の内容を切り替えるためにステートメントで使用element.innerHTMLしています。switch<div>
私の問題は、によって生成された要素にアクセスしたいのですが、アクセスelement.innerHTMLできないことです。
のテキストを変更していますid="container"。case の場合、何かを計算するためにrequSubmitcase からユーザーからの入力を取得する必要がありますが、 .requirementsinnerHTML
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 & 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 & 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 & 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 & 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;
}