无线电输入点击功能不会运行
Radio input onclick function won't run
我知道图片没有出现，但这不是问题。 输入后的文本不会显示，因为函数不会重新启动。 单选按钮是否支持点击？ 感谢您的帮助！ 我现在添加此文本是因为除非我添加更多文本，否则该网站不会让我发布此问题。不好意思。
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émon, clod!";
speechBox.onclick = function(){professorOpen();}
function professorOpen() {
speechNum++;
switch(speechNum) {
case 1:
speech = "I am Yellow Diamond – reduced to introducing Pokémon Spin-Offs.";
break;
case 2:
speech = "This world of clods is widely inhabited by creatures known as Poké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é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 Endbody {
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>这里的事情很少。首先，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>'
相关文章：
- '.在'单击“不运行”功能
- 流星 - 观察自动运行功能内未运行
- on点击不运行功能??(可能是Javascript错误?）
- 加载检查单选按钮值并运行功能
- 如何在浏览器中完成图像大小调整后运行功能?(JS/JQuery）
- 在IE中下载文件时运行功能
- 应用程序关闭前的离子运行功能
- 离子选项卡在选择后运行功能
- 检查URL和运行功能
- Chrome扩展赢得't点击按钮运行功能
- 检查时间差是否小于45分钟，并运行功能-AngularJS
- 对输入更改和复选框更改运行功能
- 如何运行功能与参数点击
- 混淆自动运行功能
- 选择按钮运行功能
- 运行功能按钮点击作为创建者用户-谷歌电子表格
- 离子应用程序运行功能在第二次点击
- 谷歌图表-运行功能后绘制
- 具有对焦运行功能的按钮在'输入'
- Onchange选择运行功能
