I am trying to make a multiplechoice game with all the text inside variables :
For exemple the HTML code is :
<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>
The Javascript code is :
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];
}
}
The main issue actually is that my radio buttons are not changing when I display a different Var... it always lead me to the same part of the function. I made a lot of test but the few Ideas I found sound really bad to me (it includes tons of coding) and I am sure there is a smart way to keep it simple. But I can't find one. :/
I would like to keep the button which call a function.
Maybe a switch will be better than an if / else if ?
I am a beginner so I hope my question was clear enough :/
Thank you
From my understanding of your question i think this is what you had in mind:
<!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>