✔ Show Form und Hide Form!

B

BonKeri

Grünschnabel
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:
HTML: 
<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
Javascript: 
_______________ . myform.next_form(___________)

---code-anfang---
Javascript: 
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)

    _______________________________________________________
}
 
Zuletzt bearbeitet von einem Moderator:
Hi,

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

Vielleicht kannst du zeigen, was du bisher erreicht hast.

Ciao
Quaese
 
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)

//_______________________________________________________
}
 
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:
Javascript: 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück