单选输入onclick功能将无法运行

Question

I know the pictures don't show up, but that's not the issue. The text after the inputs won't show because the function won't restart. Do radio buttons support onclick? Thanks for the help! I am now adding this text because the site won't let me post this question unless I add more text. Sorry.

 var gameContainer = document.getElementById("game-container"); var speechBox = document.createElement("DIV"); speechBox.id = "speech-box"; var speechP = document.createElement("P"); speechP.id = "speech-p" var speech = document.createTextNode(""); var speechNum = 0; var text = true; function startGame() { var startButton = document.getElementById("start-button"); gameContainer.removeChild(startButton); //button disappears var logo = document.createElement("IMG"); logo.src = "index/src/img/logo.gif"; gameContainer.appendChild(logo); logo.id="logo"; //logo appears var sublogo = document.createElement("P"); var sublogoText = document.createTextNode("Yellow Diamond Version"); sublogo.appendChild(sublogoText); gameContainer.appendChild(sublogo); sublogo.id="sub-logo"; var sublogoImg = document.createElement("IMG"); sublogoImg.src = "index/src/img/yellowDiamondFace.png" gameContainer.appendChild(sublogoImg); sublogoImg.id = "sub-logo-img"; setTimeout(preLogoFade,3000); function preLogoFade() { var logoOpacity = .9; var logoInterval = setInterval(function(){LogoFade()},100); function LogoFade() { logo.style.opacity=logoOpacity; sublogo.style.opacity=logoOpacity; sublogoImg.style.opacity=logoOpacity; logoOpacity-=.1; if(logoOpacity<=0){ gameContainer.removeChild(logo); gameContainer.removeChild(sublogo); gameContainer.removeChild(sublogoImg); clearInterval(logoInterval); setTimeout(mainMenu,200); } } //LogoFade Func End } //preLogoFade Func End } //startGame Func End function mainMenu() { var mainMenuBox = document.createElement("DIV"); mainMenuBox.id = "main-menu-box"; var mainMenuBoxNew = document.createElement("P"); mainMenuBoxNew.className = "main-menu-box-p"; mainMenuBoxNew.innerHTML = "New Game"; var mainMenuBoxNewPic = document.createElement("IMG"); mainMenuBoxNewPic.className = "main-menu-box-pic"; mainMenuBoxNewPic.src = "index/src/img/red.gif" mainMenuBoxNew.appendChild(mainMenuBoxNewPic); mainMenuBoxNew.onmouseenter = function(){mainMenuBoxNewPic.src = "index/src/img/redAnimated.gif";} mainMenuBoxNew.onmouseleave = function(){mainMenuBoxNewPic.src = "index/src/img/red.gif";} mainMenuBoxNew.onclick = function(){mainMenuNewFunc();} function mainMenuNewFunc() { gameContainer.removeChild(mainMenuBox); preProfessorOpen(); } var mainMenuBoxSave = document.createElement("P"); mainMenuBoxSave.className = "main-menu-box-p"; mainMenuBoxSave.innerHTML = "Save Code"; var mainMenuBoxSavePic = document.createElement("IMG"); mainMenuBoxSavePic.className = "main-menu-box-pic"; mainMenuBoxSavePic.src = "index/src/img/binary.jpg"; mainMenuBoxSave.appendChild(mainMenuBoxSavePic); mainMenuBoxSave.onmouseenter = function(){mainMenuBoxSavePic.src = "index/src/img/binaryAnimated.gif";} mainMenuBoxSave.onmouseleave = function(){mainMenuBoxSavePic.src = "index/src/img/binary.jpg";} var mainMenuBoxCheat = document.createElement("P"); mainMenuBoxCheat.className = "main-menu-box-p"; mainMenuBoxCheat.innerHTML = "Cheat Code"; var mainMenuBoxCheatPic = document.createElement("IMG"); mainMenuBoxCheatPic.className = "main-menu-box-pic"; mainMenuBoxCheatPic.src = "index/src/img/cheatCode.jpg"; mainMenuBoxCheat.appendChild(mainMenuBoxCheatPic); mainMenuBoxCheat.onmouseenter = function(){mainMenuBoxCheatPic.src = "index/src/img/cheatCodeAnimated.gif";} mainMenuBoxCheat.onmouseleave = function(){mainMenuBoxCheatPic.src = "index/src/img/cheatCode.jpg";} gameContainer.appendChild(mainMenuBox); mainMenuBox.appendChild(mainMenuBoxNew); mainMenuBox.appendChild(mainMenuBoxSave); mainMenuBox.appendChild(mainMenuBoxCheat); } function preProfessorOpen() { document.body.style.backgroundImage = "url(index/src/img/professor.png)"; gameContainer.appendChild(speechBox); speechBox.appendChild(speechP); speechP.innerHTML = "Welcome to the world of Pok&eacute;mon, clod!"; speechBox.onclick = function(){professorOpen();} function professorOpen() { speechNum++; switch(speechNum) { case 1: speech = "I am Yellow Diamond &ndash; reduced to introducing Pok&eacute;mon Spin-Offs."; break; case 2: speech = "This world of clods is widely inhabited by creatures known as Pok&eacute;mon."; break; case 3: speech = "These mysterious creature can be found in every corner of this world..."; break; case 4: speech = "Some run across the plains, others fly through the skies, and others yet swim deep in the oceans..."; break; case 5: speech = "Clods live together with these Pok&eacute;mon, lending their little strength to one another to live and prosper."; break; case 6: speech = "Let's get started with some quick questions...<br>Are you a boy? Or are you a girl?<br>(Probably a boy if Alex shared this with you.)"; break; case 7: speechBox.onclick = "" speechBox.innerHTML = '<br> \\ <input type="radio" class="gender-inpt" id="male" name="gender"> \\ <label for="male" class="gender-lbl" id="male-lbl">Boy</label> \\ <br> \\ <input type="radio" class="gender-inpt" id="female" name="gender"> \\ <label for="female" class="gender-lbl" id="female-lbl">Girl</label>' document.getElementsByClassName("gender-inpt").onclick = function(){genderFunc();} document.getElementsByClassName("gender-lbl").onclick = function(){genderFunc();} function genderFunc() { window.inptM = document.getElementById("male"); professorOpen(); } break; case 8: speechBox.onclick = function(){professorOpen();} speechBox.innerHTML = ""; speechBox.appendChild(speechP); if(inptM.checked) {gender="boy";} else {gender="girl";} speech = "So, you're a " + gender + "?"; } if(text){speechP.innerHTML = speech;}; text = true; } //professOpen Func End } //preProfessOpen Func End 

 body { background-color:black; background-repeat:no-repeat; background-size:300px 700px; background-position:center top; } #game-container{ width:800px; height:700px; border:1px solid white; margin:0 auto; overflow:hidden; padding:0; } #start-button{ width:100px; height:40px; position:relative; top:330px; left:350px; background-color:red; border:1px solid white; border-bottom-width:2px; border-top-width:0px; font-size:125%; cursor:pointer; } #start-button:hover{ color:white; } #logo{ width:100%; height:300px; position:relative; z-index:3; } #sub-logo{ text-shadow: 1px 0 5px white, -1px 0 5px white, 0 1px 5px white, 0 -1px 5px white; color:#FEFF00; text-align:center; font-size:50px; position:relative; bottom:70px; left:15px; z-index:2; } #sub-logo-img{ width:550px; height:405px; margin:auto; position:relative; left:140px; bottom:170px; z-index:1; } #main-menu-box{ width:200px; margin:0 auto; border:1px solid #444444; border-radius:4px; position:relative; top:300px; cursor:pointer; } .main-menu-box-p{ border-radius:4px; background-color:#EEEEEE; border:1px solid #666666; padding-left:20px; padding-top:3px; margin:0; margin-bottom:1px; } #speech-box{ width:60%; height:100px; background-color:white; color:black; font-size:125%; border:1px solid #999999; border-radius:20px; margin:0 auto; padding:0 10px; opacity:.8; position:relative; bottom:10px; top:600px; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .main-menu-box-pic{ width:20px; height:20px; float:right; position:relative; bottom:3px; } .gender-inpt{ float:left; margin-right:10px; } #male-lbl{color:#0000FF;} #female-lbl{color:#FF0066;} 

 <!DOCTYPE HTML> <html lang="en-US"> <head> <title>Game</title> <meta name="robots" content="noindex, nofollow"> <meta name="author" content="Some Nerd."> <link rel="icon" href="http://pokeadventuretime.blogspot.com.br/favicon.ico"> <link rel="stylesheet" href="index/src/style.css"> </head> <body> <div id="game-container"> <button id="start-button" onclick="startGame()">Start</button> </div> <script src="index/src/src.js"></script> </body> </html> 

Answer 1

Few things here. First of all, getElementsByClassName returns an array-like object, so it's basically a list of all the elements it found with that class. If you want to set an onclick , you need to pick a specific element or you will just be trying to set an onclick on the list which does nothing.

Secondly, you already have a the code which you want executed upon click wrapped up in a function ( genderFunc ) so there's no need to wrap it up again. so what you want to do here is:

var inputList = document.getElementsByClassName("gender-inpt")

for( var i = 0; i< inputList.length; i++){
   inputList[i].onclick = genderFunc;
}

Alternately, you're already generating the html for the radio buttons dynamically so you could just set the onclick there:

 speechBox.innerHTML = '
<br> \
<input type="radio" class="gender-inpt" id="male" name="gender" onclick "genderFunc"> \
<label for="male" class="gender-lbl" id="male-lbl">Boy</label> \
<br> \
<input type="radio" class="gender-inpt" id="female" name="gender" onclick "genderFunc"> \
<label for="female" class="gender-lbl" id="female-lbl">Girl</label>'