多项选择 Javascript - 寻找一种聪明的方法让它发挥作用
Multiple choice Javascript - Looking for a smart way to make it work
我正在尝试用变量中的所有文本制作多项选择游戏:
例如 HTML 代码是:
<p id ="story"></p>
<div id="hide1"><input type="radio" name="sex" id="Button1" class="Button"><p id="choice1">Choice1</p></div>
<div id="hide2"><input type="radio" name="sex" id="Button2" class="Button"><p id="choice2">Choice2</p></div>
<button type="button" id="button" onclick="myFunction()">Continue</button>
Javascript代码是:
var Choix = [
"TEST1",
"TEST2",
"TEST3",
"TEST4",
"TEST5",
];
document.getElementById("story").innerHTML = Choix[0];
function myFunction()
{
if (document.getElementById('Button1').checked)
{
document.getElementById("story").innerHTML = Choix[1];
document.getElementById('choice1').innerHTML = "Choice3";
document.getElementById('choice2').innerHTML = "Choice4";
}
else if(document.getElementById('Button2').checked)
{
document.getElementById("story").innerHTML = Choix[2];
}
else if(document.getElementById('Button3').checked)
{
document.getElementById("story").innerHTML = Choix[3];
}
}
主要问题实际上是当我显示不同的 Var 时我的单选按钮没有改变...它总是引导我到功能的相同部分。我做了很多测试,但我发现的几个想法对我来说真的很糟糕(它包括大量的编码),我相信有一种聪明的方法可以让它变得简单。但我找不到一个。 :/
我想保留调用函数的按钮。
也许 switch 会比 if / else if 更好?
我是初学者所以我希望我的问题足够清楚:/
谢谢
根据我对你问题的理解我认为这就是你的想法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Game </title>
<script type='text/javascript'>
var Choix =
["TEST1",
"TEST2",
"TEST3",
"TEST4",
"TEST5"];
window.onload = function()
{
document.getElementById("story").innerHTML = Choix[0];
}
function myFunction()
{
var story = document.getElementById("story").innerHTML;
var button_1_checked = document.getElementById('Button1').checked;
var button_2_checked = document.getElementById('Button2').checked;
if ( story == Choix[0] )
{
if ( button_1_checked )
{
document.getElementById("story").innerHTML = Choix[1];
document.getElementById('choice1').innerHTML = "Choice3";
document.getElementById('choice2').innerHTML = "Choice4";
}
else if ( button_2_checked )
{
//do somthing
}
}
if ( story == Choix[1] )
{
if ( button_1_checked )
{
document.getElementById("story").innerHTML = Choix[2];
}
else if ( button_2_checked )
{
document.getElementById("story").innerHTML = Choix[3];
}
}
if ( story == Choix[2] )
{
if ( button_1_checked )
{
//do somthing
}
else if ( button_2_checked )
{
//do somthing
}
}
//a set of if statements for each Story / 'TEST'
//...
if ( button_1_checked == false && button_2_checked == false)
{
alert("Please make a choice first!");
return;
}
document.getElementById('Button1').checked = false;
document.getElementById('Button2').checked = false;
}
</script>
</head>
<body>
<p id="story"></p>
<div id="hide1">
<input type="radio" name="sex" id="Button1" class="Button">
<p id="choice1">Choice1</p>
</div>
<div id="hide2">
<input type="radio" name="sex" id="Button2" class="Button">
<p id="choice2">Choice2</p>
</div>
<button type="button" id="button" onclick="myFunction()">Continue</button>
</body>
</html>
else if
模式可以用替代方案替换,每个替代方案都可以决定它是否是它的情况以及要执行什么代码。
for (Alternative alternative : alternative) {
if (alternative.isConditionMet()) return alternative.execute()
}
在你的情况下是这样的:
alternative[0] = {
isConditionMet : function() {
return document.getElementById('Button1').checked
}
execute : function() {
document.getElementById("story").innerHTML = Choix[1];
document.getElementById('choice1').innerHTML = "Choice3";
document.getElementById('choice2').innerHTML = "Choice4";
}
}
等等
我正在尝试用变量中的所有文本制作多项选择游戏:
例如 HTML 代码是:
<p id ="story"></p>
<div id="hide1"><input type="radio" name="sex" id="Button1" class="Button"><p id="choice1">Choice1</p></div>
<div id="hide2"><input type="radio" name="sex" id="Button2" class="Button"><p id="choice2">Choice2</p></div>
<button type="button" id="button" onclick="myFunction()">Continue</button>
Javascript代码是:
var Choix = [
"TEST1",
"TEST2",
"TEST3",
"TEST4",
"TEST5",
];
document.getElementById("story").innerHTML = Choix[0];
function myFunction()
{
if (document.getElementById('Button1').checked)
{
document.getElementById("story").innerHTML = Choix[1];
document.getElementById('choice1').innerHTML = "Choice3";
document.getElementById('choice2').innerHTML = "Choice4";
}
else if(document.getElementById('Button2').checked)
{
document.getElementById("story").innerHTML = Choix[2];
}
else if(document.getElementById('Button3').checked)
{
document.getElementById("story").innerHTML = Choix[3];
}
}
主要问题实际上是当我显示不同的 Var 时我的单选按钮没有改变...它总是引导我到功能的相同部分。我做了很多测试,但我发现的几个想法对我来说真的很糟糕(它包括大量的编码),我相信有一种聪明的方法可以让它变得简单。但我找不到一个。 :/
我想保留调用函数的按钮。
也许 switch 会比 if / else if 更好?
我是初学者所以我希望我的问题足够清楚:/
谢谢
根据我对你问题的理解我认为这就是你的想法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Game </title>
<script type='text/javascript'>
var Choix =
["TEST1",
"TEST2",
"TEST3",
"TEST4",
"TEST5"];
window.onload = function()
{
document.getElementById("story").innerHTML = Choix[0];
}
function myFunction()
{
var story = document.getElementById("story").innerHTML;
var button_1_checked = document.getElementById('Button1').checked;
var button_2_checked = document.getElementById('Button2').checked;
if ( story == Choix[0] )
{
if ( button_1_checked )
{
document.getElementById("story").innerHTML = Choix[1];
document.getElementById('choice1').innerHTML = "Choice3";
document.getElementById('choice2').innerHTML = "Choice4";
}
else if ( button_2_checked )
{
//do somthing
}
}
if ( story == Choix[1] )
{
if ( button_1_checked )
{
document.getElementById("story").innerHTML = Choix[2];
}
else if ( button_2_checked )
{
document.getElementById("story").innerHTML = Choix[3];
}
}
if ( story == Choix[2] )
{
if ( button_1_checked )
{
//do somthing
}
else if ( button_2_checked )
{
//do somthing
}
}
//a set of if statements for each Story / 'TEST'
//...
if ( button_1_checked == false && button_2_checked == false)
{
alert("Please make a choice first!");
return;
}
document.getElementById('Button1').checked = false;
document.getElementById('Button2').checked = false;
}
</script>
</head>
<body>
<p id="story"></p>
<div id="hide1">
<input type="radio" name="sex" id="Button1" class="Button">
<p id="choice1">Choice1</p>
</div>
<div id="hide2">
<input type="radio" name="sex" id="Button2" class="Button">
<p id="choice2">Choice2</p>
</div>
<button type="button" id="button" onclick="myFunction()">Continue</button>
</body>
</html>
else if
模式可以用替代方案替换,每个替代方案都可以决定它是否是它的情况以及要执行什么代码。
for (Alternative alternative : alternative) {
if (alternative.isConditionMet()) return alternative.execute()
}
在你的情况下是这样的:
alternative[0] = {
isConditionMet : function() {
return document.getElementById('Button1').checked
}
execute : function() {
document.getElementById("story").innerHTML = Choix[1];
document.getElementById('choice1').innerHTML = "Choice3";
document.getElementById('choice2').innerHTML = "Choice4";
}
}
等等