JavaScript Umfrage innerhalb einer Seite optimieren?

[Dsimon24]

Hallo zusammen,

ich versuche gerade ein fertiges Script anzupassen, um weitere Fragen in eine Umfrage zu packen.
Die Seite wird anfangs vollständig geladen, es werden aber immer nur die einzelne Fragen zu der
Umfrage angezeigt. Der Rest wird per CSS ausgeblendet. Über JavaScript wird vor oder zurück
gesprungen, innerhalb der Fragen.

Das Ganze sieht dann so aus:

HTML:

<div style="display: block" id="div1">

    <h2>Hallo,</h2>
    <p>Teil 1 von 3...</p>

    <span class="btn btn-danger"
            onclick="go1to2()">
        Nächsten Seite
    </span>

</div>

<div style="display: none" id="div2">

    <h2>Hallo,</h2>
    <p>Teil 2 von 3...</p>

    <span class="btn"
        onclick="go2to1()">
        Zurück
    </span>
    <span class="btn btn-danger"
        onclick="go2to3()">
        Weiter
    </span>

</div>

<div style="display: none" id="div3">

    <h2>Hallo,</h2>
    <p>Teil 3 von 3...</p>

    <span class="btn"
        onclick="go3to2()">
        Zurück
    </span>
    <span class="btn btn-danger"
        onclick="go3to4()">
        Weiter
    </span>

</div>

JavaScript:

function go1to2() {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'block';
    document.getElementById('div3').style.display = 'none';
}

function go2to3() {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'block';
}

function go3to4() {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
}

function go4to3() {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'block';
}

function go3to2() {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'block';
    document.getElementById('div3').style.display = 'none';
}

function go2to1() {
    document.getElementById('div1').style.display = 'block';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
}

Kann man das Ganze - zumindest im JavaScript-Bereich - etwas optimieren?
Bei bspw. 15 Fragen wären das ja unzählige Zeilen in der JS-Funktion.

Vielleicht habt ihr Tipps für mich?

VG,

 

[tollertyp]

Ja, kann man (quasi beliebig) optimieren...
z.B. allen DIVs eine Klasse geben, und immer alle anhand der Klasse ausblenden, und nur den angesprungenen einblenden...
Außerdem spielt es keine Rolle, so wie ich es sehe, ob man von 1 auf 2 oder von 3 auf 2 geht... das Ergebnis (=der Code innerhalb der Funktion) ist doch dasselbe... Also warum braucht es dafür zwei Funktionen?

 

[BeBur]

Am besten gar nicht selber machen, sondern fertige libs dafür nehmen. Das was du da vorliegen hast ist ja schon sehr basic und taugt mehr für ein Javascript Tutorial.
Eine Low-Tech Möglichkeit:
1. Sinnvolle Id bzw. class Namen vergeben
2. Mit einzelner JS Zeile alle buttons an die selbe funktion koppeln
3. Die Nummer K des Buttons extrahieren (aus Id oder Klasse)
4. div K+1 einblenden, K ausblenden

Nimm aber wirklich einfach was fertiges. Entweder Javascript oder einfach Google-Forms oder sowas. Programmieren macht oft wenig Spaß aber noch viel weniger, wenn man nicht programmieren kann.
Oder geh den Fleißweg und mach ganz oft kopieren+einfügen. Hat den Vorteil, dass du auch weißt was da passiert, wenn du dir jetzt Code zusammenkopierst der schön kompakt ist stehen die Chancen deutlich schlechter, dass du irgendwas erfolgreich anpassen kannst später mal.