I am trying to create a kind of survey with 26 questions and want the shown question (saved in a div) to change when the proceed button is clicked. I have tried several things now but nothing worked out for me. I can't use JQuery because the final product has to work in IE7 and I am a beginner in terms of programming so I am kind of stuck here.
For further information's please take a look at my code, I know having JS in the html file isn't that great but for this small bit of code I think its OK. At the moment I am only able to switch in between two questions how do I get the ability to add more than 2 questions?
HTML with script at the end:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form-wrapper">
<h1>Wie sehr (oder oft) wurden Sie in den letzten ZWEI Wochen von den folgenden Problmen belastet?</h1>
<br>
<br> <!-- QUESTIONS -->
<div id="Frage1" class="frage" style="display:block">1: Wenig Interesse oder Freude an Dingen und Aktivitäten.</div>
<div id="Frage2" class="frage" style="display:none">2: Sich niedergeschlagen, depressiv oder hoffnungslos fühlen. </div>
<div id="Frage3" class="frage" style="display:none">3: Sich reizbarer, mürrischer oder ärgerlicher als gewöhnlich fühlen.</div>
<br> <!-- ANSWER BUTTONS -->
<form action="">
<form class="form">
<br>
<section>
<div>
<input type="radio" id="control_01" name="select" value="0">
<label for="control_01">
<h2>Garnicht</h2>
<p>überhaupt nicht.</p>
</label>
</div>
<div>
<input type="radio" id="control_02" name="select" value="1">
<label for="control_02">
<h2>Kaum</h2>
<p>selten, an weniger als 1-2 Tagen</p>
</label>
</div>
<div>
<input type="radio" id="control_03" name="select" value="2">
<label for="control_03">
<h2>Leicht</h2>
<p>an mehreren Tagen.</p>
</label>
</div>
<div>
<input type="radio" id="control_04" name="select" value="3">
<label for="control_04">
<h2>Mittel</h2>
<p>An mehr als der Hälfte der Tage.</p>
</label>
</div>
<div>
<input type="radio" id="control_05" name="select" value="4">
<label for="control_05">
<h2>Stark</h2>
<p>An fast jedem Tag.</p>
</label>
</div>
<div>
<input type="radio" id="control_06" name="select" value="">
<label for="control_06">
<h2>KA</h2>
<p>Das möchte ich nicht beantworten.</p>
</label>
</div>
</section>
<button id="weiter" class="Weiter" name="submit" onclick="auswertung();replace();return false">Weiter</button>
</form>
</div>
<!-- Wrapper ende -->
<script> <!-- change question script that needs to be reworked -->
function replace() {
document.getElementById("Frage1").style.display = "none";
document.getElementById("Frage2").style.display = "block";
document.getElementById("Frage3").style.display = "none";
}
</script>
<script>
function auswertung() {
var radios = document.getElementsByName('select');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
// wohin der wert geschrieben wird
alert(radios[i].value);
break;
}
}
}
</script>
</body>
</html>
