✔ Show Form und Hide Form!

[BonKeri]

Kann mir vielleicht jemand helfen diesen Code zu ergänzen. Ich danke euch im Voraus!


Der Code soll ergänzt werden.
Der Server baue dynamisch, infolge eine HTTP-Request eine HTML-Seite zusammen, die aus zahlreichen, gleich strukturierten form-Tags besteht. Jedes form-Tag enthalte z.B. eine Adresse. Es ist eine Bibliothek myform zu schreiben. Bitte sorgsam ergänzen.

myform.show_form(i) soll das i-te Formaular sichtbar machen (anzeigen),
myform.next_form() soll das nächste und
myform.prev_form() das vorhergehende Formular anzeigen.

Hierzu sollen die folgenden a-Tags verwendet werden:

<a href='javascript:myform.show_form(0)'> show_form(0) </a>
<a href='javascript:myform.next_form()'> next_form </a>
<a href='javascript:myform.prev_form()'> prev_form </a>

Für den HTML-Header diese Seite soll eine ECMAScript-Bibliothek myform geschrieben werden. Es soll lediglich ein einziges form-Tag (das aktuelle form-Tag) sichtbar sein. Die Sichtbarkeit soll mit Hilfe von .next_form() und .prev_form() "weitergeschalten" werden können.

(a) Ergänzen sie die Strict-Mode-Directive.
(b) Ergänzen sie die "globale" Variable IDX
und das window-Objekt. IDX ist der aktuelle
form-Index des einen aktuell-sichtbaren Formulares.
(c) Schreiben sie eine (interne) Funktion get_forms(),
die in einem Array alle form-Tag-Referenzen
der HTML-Seite zurück gibt.
(d) Schreiben sie eine Funktion hide_forms(), die
alle form-Tags der Seite (mit Hilfe von
el.style.display='...') unsichtbar macht.
(e) Schreiben sie eine Funktion show_form(idx),
die zunächst alle form-Tag unsichtbar macht
und dann das idx-te-form-Tag sichtbar stellt.
(f) Schreiben sie eine Funktion next_form(), die
das nächste Formular (zyklisch) sichtbar stellt.
(g) Schreiben sie eine Funktion prev_form(), die
das vorherige Formular (zyklisch) sichtbar stellt.
(h) Nach dem Laden de Seite soll das letzte Formular
sichtbar sein.

(i) Für eine MDI-Applikation soll die myform-Bibliothek
in die frameset-Seite. Hierzu muß für get_forms()
und show_form(), next_form(), prev_form ein
zusätzlicher Parameter doc eingeführt werden.
Dann erfolgt, anstelle von z.B. myform.next_form(),
der Aufruf in einer Frame-Seite mit

_______________ . myform.next_form(___________)

---code-anfang---

var myform = (function(______) { // zu (b)
    __________________________ // zu (a)

    var doc = ________________, // zu (b)

        IDX = ______;

    function get_forms() { // zu (c)

        return doc.__________________________________('form');
    }

    function hide_forms() { // zu (d)
        var i, fa = get_forms();
        for (i = 0; i < fa.length; i += 1) {

            ___________________________________________________
        }
        return fa;
    }

    function show_form(idx) { // zu (e)
        var fa = hide_forms();
        _____________________________________________________

        _____________________________________________________
    }

    function next_form() { // zu (f)
        var fa = get_forms();

        _____________________________________________________
        show_form(IDX);
    }

    function prev_form() { // zu (g)
        var fa = get_forms();
        _____________________________________________________
        show_form(IDX);
    }
    return {
        show_form: show_form,
        next_form: next_form,
        prev_form: prev_form
    };
}(__________________)); // zu (b)


window.____________ = function() { // zu (h)

    _______________________________________________________
}

 

[Quaese]

Hi,

ich habe mir erlaubt, Code-Tags einzufügen.

Vielleicht kannst du zeigen, was du bisher erreicht hast.

Ciao
Quaese

 

[BonKeri]

__________________________

"use strict"; //a
document //zu b
IDX=0;

getElementsByTagName // zu c

fa.style.display='none'; //zu d

mehr kann ich leider nicht weiter gehen, hoffe Ihr könnt mir da weiter helfen

 

[BonKeri]

Bis jetzt habe ich das noch hinzugefügt, ich bin mir auch nicht sicher ob es so alles stimmt:
_____________________________________________

<script type="text/javascript">

var myform = (function(win) { // zu (b)
"use strict"; // zu (a)

var doc = document, // zu (b)

IDX = 0;
function get_forms() { // zu (c)

return doc.getElementsByTagName('form');
}

function hide_forms() { // zu (d)
var i, fa = get_forms();
for(i = 0; i < fa.length; i += 1) {
fa.style.display='none';
} return fa;
}

function show_form(idx) { // zu (e)
var fa = hide_forms();
fa=doc.getElementById(idx);
fa.style.display='block';
}

function next_form() { // zu (f)
var fa = get_forms();

_____________________________________________________
show_form(IDX);
}

function prev_form() { // zu (g)
var fa = get_forms();
//_____________________________________________________
show_form(IDX);
}
return { show_form : show_form,
next_form : next_form,
prev_form : prev_form
};
} (window) ); // zu (b)


window.onload = function () { // zu (h)

//_______________________________________________________
}

 

[Quaese]

Guten Morgen,

zu c) und d) - bei fa handelt es sich um ein Array. Deshalb musst du auf die einzelnen Komponenten zugreifen (eckige Klammern).

Zu d) und f) - hier soll immer das folgende/vorhergehende Element angezeigt werden. Aus diesem Grund muss geprüft werden, ob die Grenzen erreicht wurden und notfalls korrigiert werden.

Zu h) - im onload-Handler soll das letzte Formular angezeigt werden. Also die gerade entwickelten Methoden verwenden.

Meine Lösung - ohne Test und grössere Plausibilitätsprüfung:

var myform = (function(win) { // zu (b)
    'use strict'; // zu (a)

    var doc = win.document, // zu (b)
        IDX = index;

    function get_forms() { // zu (c)
        return doc.getElementsByTagName('form');
    }

    function hide_forms() { // zu (d)
        var i, fa = get_forms();
        for (i = 0; i < fa.length; i += 1) {
            fa[i].style.display = "none";
        }
        return fa;
    }

    function show_form(idx) { // zu (e)
        var fa = hide_forms();

        fa[idx].style.display = "block";
    }

    function next_form() { // zu (f)
        var fa = get_forms();

        IDX = (IDX + 1 >= fa.length) ? 0 : IDX+1;
        show_form(IDX);
    }

    function prev_form() { // zu (g)
        var fa = get_forms();

        IDX = (IDX - 1 < 0) ? fa.length-1 : IDX-1;
        show_form(IDX);
    }
    return {
        show_form: show_form,
        next_form: next_form,
        prev_form: prev_form
    };
}(window); // zu (b)

window.onload = function() { // zu (h)

    myform.show_form(myform.get_forms().length-1]);
}

Ciao
Quaese

 

[BonKeri]

Guten morgen,

Vielen dank für die Lösung, auf euch kann man sich immer verlassen.

Schönen Tag noch