JavaScript Dynamischer Inhalt (je nach Klick auf Radiobutton)?

[Dsimon24]

Hallo zusammen,

ich bräuchte nochmal einen Tipp von euch, wie ich vorgehen kann.
Ich versuche mal eine Light-Zusammenfassung meiner Seite als
Beispiel darzustellen.

Ich habe drei Input-Button:

<input type="radio" value="Auto" href="#" onclick="quest1_I()" id="a1" name="optradio_1">
<input type="radio" value="Fahrrad" href="#" onclick="quest1_I()" id="a2" name="optradio_1">
<input type="radio" value="Flugzeug" href="#" onclick="quest1_I()" id="a3" name="optradio_1">

In der onclick-Funktion habe ich unter Anderem die folgende JavaScript-Anweisung:

window.location.hash = '#p2';

damit der nächste Abschnitt nach einem Klick in die entsp. Radiobox gescrollt wird.

So, auf #p2 soll sich das ganze dann mit anderen Radiobutton wiederholen.
Allerdings kommen je nach Antwort (Klick in Box 1, 2 oder 3 - oben) im
zweiten Abschnitt dann andere Radiobutton.

Bei Klick im ersten Abschnitt auf 'Fahrrad' bspw.:

<input type="radio" value="Fahrrad vorhanden" href="#" onclick="quest1_I()" id="m" name="optradio_1">
<input type="radio" value="Fahrrad n. vorhanden" href="#" onclick="quest1_I()" id="n" name="optradio_1">

Bei Klick im ersten Abschnitt auf 'Auto' bspw.:

<input type="radio" value="Auto vorhanden" href="#" onclick="quest1_I()" id="x" name="optradio_1">
<input type="radio" value="Auto n. vorhanden" href="#" onclick="quest1_I()" id="y" name="optradio_1">

Und dann wiederholt sich das ganze noch ein paar Mal. Mein Problem ist nun:
Wie erstelle ich dynamisch die Radiobutton (am besten mit Beschriftung)
auf Grundlage der zuvor gewählten Antwort?

VG, David

 

[PhysoX512]

Da kann ich nur das JavaScript-Framework jQuery empfehlen.
Damit kannst du DOM-Elemente verstecken/anzeigen oder Elemente erstellen und anhängen.

Ich würde die Radios "der Stufe 2" zunächst versteckt halten und wenn Stufe 1 gecheckt wird, anzeigen.
Zum Beispiel so:

<input type="radio" id="stufe1radio" name="optradio_1"/>
<input type="radio" id="stufe2radio" style="display:hidden;"/>

// Reagieren, wenn ein Radiobutton geclickt wird
$('input[name="optradio_1"]').change(function(){
   // Wert von Radiobutton 1 in val1 speichern
    var val1 = $('input[name="optradio_1"]').val();

  // Wenn val1 den entsprechenden Wert hat, die zweite Stufe einblenden
   if(val1 === "flugzeug") {
      $('#stufe2radio').show();
   }

});

 

[Yuuri]

Erstmal wäre es sinnvoll ein Framework zu nutzen, was delegierte Events beherrscht - bspw. jQuery. Damit schreibst du den Code einmal sauber und das Framework übernimmt dann die Arbeit mit dem DOM.

$(document).on( "change", "input.choose", function() { ... } );

Den Radiobuttons vergibst du dann die Klasse choose und du musst dich nicht mehr um die gruseligen Eventhandler manuell kümmern.

Weiterhin solltest du dir die data-Attribute ansehen und diese entsprechend vergeben.

<input type="radio" value="Fahrrad vorhanden" name="optradio_1" class="choose" data-next="2">
<input type="radio" value="Fahrrad n. vorhanden" name="optradio_1" class="choose" data-next="2">

...

<input type="radio" value="Auto vorhanden" name="optradio_1" class="choose" data-next="3">
<input type="radio" value="Auto n. vorhanden" name="optradio_1" class="choose" data-next="3">

So kannst du beim Klick auf optradio_1 mit

$(this).data( "next" )

den Wert "2" bekommen und weißt, dass nach dem Klick dieser Box der nächste Schritt Nummer 2 ist.

Wie erstelle ich dynamisch die Radiobutton (am besten mit Beschriftung)
auf Grundlage der zuvor gewählten Antwort?

Dann musst du ne Logik dafür bauen - bspw. mit nem simplen Dictionary/Objekt.

Bspw.:

Spoiler

var questions = {
	start: {
		question: "Was magst du?",
		answers: [
			{
				text: "Auto",
				value: "car",
				next: "auto" /* Schlüssel in questions-Objekt für die nächsten Fragen/Antworten */
			},
			{
				text: "Fahrrad",
				value: "bike",
				next: "fahrrad"
			},
			{
				text: "Flugzeug",
				value: "plane",
				next: "flugzeug"
			}
		]
	},
	auto: {
		question: "Welche Farbe soll dein Auto haben?",
		answers: [
			{
				text: "rot",
				value: "red",
				next: "rotesAuto"
			},
			{
				text: "gelb",
				value: "yellow",
				next: "gelbesAuto"
			},
			{
				text: "blau",
				value: "blue",
				next: "blauesAuto"
			}
		]
	},
	rotesAuto: {/*...*/},
	gelbesAuto: {/*...*/},
	blauesAuto: {/*...*/},
	fahrrad: {/*...*/},
	flugzeug: {/*...*/}
};

Dann musst du nur noch auf Basis dieser Objekte deine Radiobuttons aufbauen und beim Klick entsprechend reagieren.


Mal ganz Quick'n'Dirty ne Implementierung, komplett ungetestet (nutzt ES6 Template Strings, musst du ggf. in aktuelle Syntax umsetzen):

Spoiler

<body>

<div id="body"></div>

<script type="text/javascript">
(function()
{
	var questions: {/*...*/}, // Objekt siehe oben
			currentStep = "start", // aktueller Schritt
			chosenAnswers = [], // gewählte Antworten
			$root = $("#body"); // unser Knoten, an welchem wir die Fragen und Antworten anfügen

	var createStep = function( step ) // erstellt das Markup für eine Frage
	{
		var r = [];
		var question = questions[step];

		r.push( $(`<div class="frage">Frage: ${question.question}</div>` ) );

		question.answers.forEach( function( answer )
		{
			r.push( $(`<div class="antwort">
				<label>
					<input class="choose" type="radio" value="${answer.value}" data-next="${answer.next}">
					${answer.text}
				</label>
			</div>` ) );
		} );

		return r;
	};

	var renderCurrentStep = function() // fügt alle generierten Knoten aus createStep() ans DOM an mit den Fragen aus dem aktuellen Schritt
	{
		$root.children().remove();
		var $step = createStep( currentStep );
		$step.forEach( function( node ) { $root.append( node ); } );
	};

	$(document).on( "change", "input.choose", function() // der Event Listener zum Tracken des Klickens auf einen Radio Button
	{
		var nextStep = $(this).data( "next" );
		var chosenAnswer = $(this).val();
		chosenAnswers.push( chosenAnswer );
		currentStep = nextStep;
		renderCurrentStep();
	} );

	renderCurrentStep(); // rendern
})();
</script>

</body>

 

[Dsimon24]

Danke euch, das werde ich mir mal in Ruhe ansehen.

Zu dem Quellcode von PhysoX512 habe ich allerdings noch eine Frage.

$('input[name="optradio_1"]').change(function(){
   // Wert von Radiobutton 1 in val1 speichern
    var val1 = $('input[name="optradio_1"]').val();
});

Wie kann ich denn mittels jQuery, statt mir den Value-Wert des gedrückten
Button auszugeben, prüfen, ob der Button mit ID x oder mit ID y geklickt
wurde - geht das auch?

VG, David

 

[kling1]

wenn du im callback bist.. kannst du this verwenden
also

$('input[name="optradio_1"]').on('change', function () {
  var id = $(this).attr('id')
})