多项选择 Javascript - 寻找一种让它工作的聪明方法答案

【问题标题】：Multiple choice Javascript - Looking for a smart way to make it work多项选择 Javascript - 寻找一种让它工作的聪明方法
【发布时间】：2015-02-09 00:44:46
【问题描述】：

我正在尝试使用变量中的所有文本制作多项选择游戏：

例如 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 更好？

我是初学者，所以我希望我的问题足够清楚：/

谢谢

【问题讨论】：

您的代码很难理解，或者更确切地说，您的代码并不清楚您到底想要发生什么。请解释/注释代码以说明应该发生什么。另外，这 3 个可检查的按钮在哪里？我只看到两个！
在您的游戏过程中，您是否可能需要两个以上的单选按钮（选项）？

标签： javascript function if-statement switch-statement multiple-choice

【解决方案1】：

根据我对您的问题的理解我认为这就是您的想法：

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

【讨论】：

很高兴！如果它对你有用，请不要忘记将我的答案标记为正确:)

【解决方案2】：

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";
  }
}

等等

【讨论】：