Функция ввода радиоприемника не будет работать

Question

Я знаю, что фотографии не отображаются, но это не проблема. Текст после ввода не будет отображаться, потому что функция не будет перезагружена. Поддерживаются ли переключатели? Спасибо за помощь! Теперь я добавляю этот текст, потому что сайт не позволит мне опубликовать этот вопрос, если я не добавлю больше текста. Сожалею.

var gameContainer = document.getElementById("game-container"); 
 

 
var speechBox = document.createElement("DIV"); 
 
\t speechBox.id = "speech-box"; 
 
\t var speechP = document.createElement("P"); 
 
\t \t speechP.id = "speech-p" 
 
\t \t var speech = document.createTextNode(""); 
 
\t var speechNum = 0; 
 
\t var text = true; 
 

 
function startGame() { 
 
\t var startButton = document.getElementById("start-button"); 
 
\t gameContainer.removeChild(startButton); \t \t \t \t \t \t //button disappears 
 
      
 
\t var logo = document.createElement("IMG"); 
 
\t logo.src = "index/src/img/logo.gif"; 
 
\t gameContainer.appendChild(logo); 
 
\t logo.id="logo"; \t \t \t \t \t \t \t \t \t \t //logo appears 
 
\t var sublogo = document.createElement("P"); 
 
\t var sublogoText = document.createTextNode("Yellow Diamond Version"); 
 
\t sublogo.appendChild(sublogoText); 
 
\t gameContainer.appendChild(sublogo); 
 
\t sublogo.id="sub-logo"; 
 
\t var sublogoImg = document.createElement("IMG"); 
 
\t sublogoImg.src = "index/src/img/yellowDiamondFace.png" 
 
\t gameContainer.appendChild(sublogoImg); 
 
\t sublogoImg.id = "sub-logo-img"; 
 

 
\t setTimeout(preLogoFade,3000); 
 
\t function preLogoFade() { 
 
\t \t var logoOpacity = .9; 
 
\t \t var logoInterval = setInterval(function(){LogoFade()},100); 
 
\t \t \t function LogoFade() { 
 
\t \t \t \t logo.style.opacity=logoOpacity; 
 
\t \t \t \t sublogo.style.opacity=logoOpacity; 
 
\t \t \t \t sublogoImg.style.opacity=logoOpacity; 
 
\t \t \t \t logoOpacity-=.1; 
 
\t \t \t \t if(logoOpacity<=0){ 
 
\t \t \t \t \t gameContainer.removeChild(logo); 
 
\t \t \t \t \t gameContainer.removeChild(sublogo); 
 
\t \t \t \t \t gameContainer.removeChild(sublogoImg); 
 
\t \t \t \t \t clearInterval(logoInterval); 
 
\t \t \t \t \t setTimeout(mainMenu,200); 
 
\t \t \t \t } 
 
\t \t \t } \t \t \t \t \t \t \t \t \t \t //LogoFade Func End 
 
\t } \t \t \t \t \t \t \t \t \t \t \t \t //preLogoFade Func End 
 
} \t \t \t \t \t \t \t \t \t \t \t \t \t //startGame Func End 
 

 
function mainMenu() { 
 
\t var mainMenuBox = document.createElement("DIV"); 
 
\t \t mainMenuBox.id = "main-menu-box"; 
 
\t var mainMenuBoxNew = document.createElement("P"); 
 
\t \t mainMenuBoxNew.className = "main-menu-box-p"; 
 
\t \t mainMenuBoxNew.innerHTML = "New Game"; 
 
\t \t \t var mainMenuBoxNewPic = document.createElement("IMG"); 
 
\t \t \t \t mainMenuBoxNewPic.className = "main-menu-box-pic"; 
 
\t \t \t \t mainMenuBoxNewPic.src = "index/src/img/red.gif" 
 
\t \t \t \t mainMenuBoxNew.appendChild(mainMenuBoxNewPic); 
 
\t \t mainMenuBoxNew.onmouseenter = function(){mainMenuBoxNewPic.src = "index/src/img/redAnimated.gif";} 
 
\t \t mainMenuBoxNew.onmouseleave = function(){mainMenuBoxNewPic.src = "index/src/img/red.gif";} 
 
\t \t mainMenuBoxNew.onclick = function(){mainMenuNewFunc();} 
 
\t \t \t function mainMenuNewFunc() { 
 
\t \t \t \t gameContainer.removeChild(mainMenuBox); 
 
\t \t \t \t preProfessorOpen(); 
 
\t \t \t } 
 
\t var mainMenuBoxSave = document.createElement("P"); 
 
\t \t mainMenuBoxSave.className = "main-menu-box-p"; 
 
\t \t mainMenuBoxSave.innerHTML = "Save Code"; 
 
\t \t \t var mainMenuBoxSavePic = document.createElement("IMG"); 
 
\t \t \t \t mainMenuBoxSavePic.className = "main-menu-box-pic"; 
 
\t \t \t \t mainMenuBoxSavePic.src = "index/src/img/binary.jpg"; 
 
\t \t \t \t mainMenuBoxSave.appendChild(mainMenuBoxSavePic); 
 
\t \t mainMenuBoxSave.onmouseenter = function(){mainMenuBoxSavePic.src = "index/src/img/binaryAnimated.gif";} 
 
\t \t mainMenuBoxSave.onmouseleave = function(){mainMenuBoxSavePic.src = "index/src/img/binary.jpg";} 
 
\t var mainMenuBoxCheat = document.createElement("P"); 
 
\t \t mainMenuBoxCheat.className = "main-menu-box-p"; 
 
\t \t mainMenuBoxCheat.innerHTML = "Cheat Code"; 
 
\t \t \t var mainMenuBoxCheatPic = document.createElement("IMG"); 
 
\t \t \t \t mainMenuBoxCheatPic.className = "main-menu-box-pic"; 
 
\t \t \t \t mainMenuBoxCheatPic.src = "index/src/img/cheatCode.jpg"; 
 
\t \t \t \t mainMenuBoxCheat.appendChild(mainMenuBoxCheatPic); 
 
\t \t mainMenuBoxCheat.onmouseenter = function(){mainMenuBoxCheatPic.src = "index/src/img/cheatCodeAnimated.gif";} 
 
\t \t mainMenuBoxCheat.onmouseleave = function(){mainMenuBoxCheatPic.src = "index/src/img/cheatCode.jpg";} 
 
\t gameContainer.appendChild(mainMenuBox); 
 
\t mainMenuBox.appendChild(mainMenuBoxNew); 
 
\t mainMenuBox.appendChild(mainMenuBoxSave); 
 
\t mainMenuBox.appendChild(mainMenuBoxCheat); 
 
} 
 

 
function preProfessorOpen() { 
 
\t document.body.style.backgroundImage = "url(index/src/img/professor.png)"; 
 
\t gameContainer.appendChild(speechBox); 
 
\t \t speechBox.appendChild(speechP); 
 
\t \t speechP.innerHTML = "Welcome to the world of Pok&eacute;mon, clod!"; 
 
\t speechBox.onclick = function(){professorOpen();} 
 
\t \t function professorOpen() { 
 
\t \t \t speechNum++; 
 
\t \t \t switch(speechNum) { 
 
\t \t \t \t case 1: 
 
\t \t \t \t \t speech = "I am Yellow Diamond &ndash; reduced to introducing Pok&eacute;mon Spin-Offs."; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 2: 
 
\t \t \t \t \t speech = "This world of clods is widely inhabited by creatures known as Pok&eacute;mon."; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 3: 
 
\t \t \t \t \t speech = "These mysterious creature can be found in every corner of this world..."; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 4: 
 
\t \t \t \t \t speech = "Some run across the plains, others fly through the skies, and others yet swim deep in the oceans..."; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 5: 
 
\t \t \t \t \t speech = "Clods live together with these Pok&eacute;mon, lending their little strength to one another to live and prosper."; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 6: 
 
\t \t \t \t \t 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.)"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 7: 
 
\t \t \t \t \t speechBox.onclick = "" 
 
\t \t \t \t \t speechBox.innerHTML = '<br> \ 
 
\t \t \t \t \t \t \t \t \t <input type="radio" class="gender-inpt" id="male" name="gender"> \ 
 
\t \t \t \t \t \t \t \t \t <label for="male" class="gender-lbl" id="male-lbl">Boy</label> \ 
 
\t \t \t \t \t \t \t \t \t <br> \ 
 
\t \t \t \t \t \t \t \t \t <input type="radio" class="gender-inpt" id="female" name="gender"> \ 
 
\t \t \t \t \t \t \t \t \t <label for="female" class="gender-lbl" id="female-lbl">Girl</label>' 
 
\t \t \t \t \t \t \t document.getElementsByClassName("gender-inpt").onclick = function(){genderFunc();} 
 
\t \t \t \t \t \t \t document.getElementsByClassName("gender-lbl").onclick = function(){genderFunc();} 
 
\t \t \t \t \t \t \t \t function genderFunc() { 
 
\t \t \t \t \t \t \t \t \t window.inptM = document.getElementById("male"); 
 
\t \t \t \t \t \t \t \t \t professorOpen(); 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 8: 
 
\t \t \t \t \t speechBox.onclick = function(){professorOpen();} 
 
\t \t \t \t \t speechBox.innerHTML = ""; 
 
\t \t \t \t \t speechBox.appendChild(speechP); 
 
\t \t \t \t \t if(inptM.checked) {gender="boy";} else {gender="girl";} 
 
\t \t \t \t \t speech = "So, you're a " + gender + "?"; 
 
\t \t \t } 
 
\t \t \t \t if(text){speechP.innerHTML = speech;}; 
 
\t \t \t \t text = true; 
 
\t \t } \t \t \t \t \t \t \t \t \t \t \t //professOpen Func End 
 
} \t \t \t \t \t \t \t \t \t \t \t \t \t //preProfessOpen Func End

body { 
 
\t background-color:black; 
 
\t background-repeat:no-repeat; background-size:300px 700px; background-position:center top; 
 
} 
 
#game-container{ 
 
\t width:800px; height:700px; 
 
\t border:1px solid white; 
 
\t margin:0 auto; 
 
\t overflow:hidden; 
 
\t padding:0; 
 
} 
 

 
#start-button{ 
 
\t width:100px; height:40px; 
 
\t position:relative; top:330px; left:350px; 
 
\t background-color:red; 
 
\t border:1px solid white; border-bottom-width:2px; border-top-width:0px; 
 
\t font-size:125%; 
 
\t cursor:pointer; 
 
} 
 
#start-button:hover{ 
 
\t color:white; 
 
} 
 
#logo{ 
 
\t width:100%; height:300px; 
 
\t position:relative; 
 
\t z-index:3; 
 
} 
 
#sub-logo{ 
 
\t text-shadow: 1px 0 5px white, -1px 0 5px white, 0 1px 5px white, 0 -1px 5px white; 
 
\t color:#FEFF00; 
 
\t text-align:center; 
 
\t font-size:50px; 
 
\t position:relative; bottom:70px; left:15px; 
 
\t z-index:2; 
 
} 
 
#sub-logo-img{ 
 
\t width:550px; height:405px; 
 
\t margin:auto; 
 
\t position:relative; left:140px; bottom:170px; 
 
\t z-index:1; 
 
} 
 

 
#main-menu-box{ 
 
\t width:200px; 
 
\t margin:0 auto; 
 
\t border:1px solid #444444; border-radius:4px; 
 
\t position:relative; top:300px; 
 
\t cursor:pointer; 
 
} 
 
.main-menu-box-p{ 
 
\t border-radius:4px; 
 
\t background-color:#EEEEEE; 
 
\t border:1px solid #666666; 
 
\t padding-left:20px; padding-top:3px; 
 
\t margin:0; margin-bottom:1px; 
 
} 
 

 
#speech-box{ 
 
\t width:60%; height:100px; 
 
\t background-color:white; 
 
\t color:black; 
 
\t font-size:125%; 
 
\t border:1px solid #999999; border-radius:20px; 
 
\t margin:0 auto; 
 
\t padding:0 10px; 
 
\t opacity:.8; 
 
\t position:relative; bottom:10px; top:600px; 
 
\t cursor:pointer; 
 
\t \t -webkit-touch-callout:none; 
 
\t \t -webkit-user-select:none; 
 
\t \t -khtml-user-select:none; 
 
\t \t -moz-user-select:none; 
 
\t \t -ms-user-select:none; 
 
\t \t user-select:none; 
 
} 
 
.main-menu-box-pic{ 
 
\t width:20px; height:20px; 
 
\t float:right; 
 
\t position:relative; bottom:3px; 
 
} 
 
.gender-inpt{ 
 
\t float:left; 
 
\t margin-right:10px; 
 
} 
 
#male-lbl{color:#0000FF;} 
 
#female-lbl{color:#FF0066;}

<!DOCTYPE HTML> 
 
<html lang="en-US"> 
 
<head> 
 
\t <title>Game</title> 
 
\t <meta name="robots" content="noindex, nofollow"> 
 
\t <meta name="author" content="Some Nerd."> 
 
\t <link rel="icon" href="http://pokeadventuretime.blogspot.com.br/favicon.ico"> 
 
\t <link rel="stylesheet" href="index/src/style.css"> 
 
</head> 
 

 
<body> 
 
\t <div id="game-container"> 
 
\t \t <button id="start-button" onclick="startGame()">Start</button> 
 
\t </div> 
 
\t <script src="index/src/src.js"></script> 
 
</body> 
 
</html>

Answer 1

Немногие вещи здесь. Прежде всего, getElementsByClassName возвращает объект, подобный массиву, поэтому он представляет собой список всех элементов, найденных с этим классом. Если вы хотите установить onclick, вам нужно выбрать определенный элемент, или вы просто попытаетесь установить onclick в списке, который ничего не делает.

Во-вторых, у вас уже есть код, который вы хотите выполнить после клика, завернутого в функцию (genderFunc), поэтому нет необходимости снова его обертывать. так что вы хотите сделать здесь:

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

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

В качестве альтернативы, вы уже генерации HTML для радиокнопок динамически, так что вы можете просто установить OnClick там:

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>'