Множественный выбор Javascript - Ищете умный способ заставить его работать

Я пытаюсь сделать multiplechoice игру весь текст внутри переменных:Множественный выбор Javascript - Ищете умный способ заставить его работать

Для Exemple в 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]; 
    } 
}

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

Я хотел бы сохранить кнопку, вызывающую функцию.

Возможно, переключатель будет лучше, чем if/else if?

Я новичок, так что я надеюсь, что мой вопрос достаточно ясно:/

Спасибо

источник

2015-02-09 Boby

Ваш код довольно трудно понять, или, вернее, то, что именно вы хотите, чтобы случиться неясна из вашего кода. Пожалуйста, объясните/комментируйте код, чтобы сказать, что должно произойти. Кроме того, где эти 3 кнопки? Я вижу только два! – Hektor

Возможно ли во время игры, что вы хотите больше, чем две кнопки-переключатели (выбор)? –

Из моего понимания вашего вопроса я думаю это то, что вы имели в виду:

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

источник

2015-02-09 01:29:43

Он отлично работает :) – Boby

Свое удовольствие! Пожалуйста, не забудьте отметить мой ответ как правильный, если он хорошо работает для вас :) –

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

и так далее

источник

2015-02-09 02:17:30 piotrek

Множественный выбор Javascript - Ищете умный способ заставить его работать

ответ

Смежные вопросы