Funktion Text einblenden oder wechsel bei onchange

Dieses Thema im Forum "Webentwicklung" wurde erstellt von passi87, 17. Mai 2006 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 17. Mai 2006
    Hi Leutz mal widerr ein Problem. Habe ein formular geschrieben wo man reisen auswählen soll.

    Funktion sieht so aus:
    Code:
    var bilder=new Array(0,"aegypten.jpg","australien.jpg","australien.jpg","australien.jpg","australien.jpg","australien.jpg","australien.jpg");
    
    function bildwechsel1 () {
     var reiseNr = document.buchen.ziel1.value;
     var bildname = bilder[reiseNr];
     document.getElementById("bild1").src = "Bilder/" + bildname;
    }
    
    Und im Formular so:
    Code:
    <td>Ihr 1. Reiseziel: <select name="ziel1" size="1" onchange="bildwechsel1()">
    <option value=wahl selected>Bitte auswählen</option>
    <option value=1>Deutschland</option>
    <option value=2>Australien</option>
    <option value=3>Ägypten</option>
    <option value=4>Holland</option>
    <option value=5>Amerika</option>
    </select></td>
    
    <td><height="100px" width="100px"><img class="bild1" src="Bilder/australien.jpg" height="50" width="100" cellspacing="3">
    </img></td>
    
    Er sagt mir immer --- document.getElementById.... --- ist Null oder kein Objekt. Für jede ANtwort gibt es ne 10

    Greetz passi
     

  2. Anzeige
  3. #2 17. Mai 2006
    einfach dem bild nen namen geben dann direkt ansprechen ohne getElementById sollte funzen eigentlich

    also name="bild1"

    oder du nimmst statt der klasse ne ID dann geht auch getElementById
     
  4. #3 17. Mai 2006
    ok thx, kann dir immo leider keine 10 mehr geben, aber sage nem Kumpel bescheid der macht das für mich und tx für die schnelle asntwort.

    Geht Prima.


    Noch nicht CLOSED

    Habe da nähmlich noch eine Frage, kann man auch einen Text anstelle eines Bildes dann einblenden lassen? Was müsste ich dazu einbinden?

    Müsste dan erstmal die letzte Frage gewesen sein.
     
  5. #4 17. Mai 2006
    hmm also wenn du entweder ein bild ODER einen text willst musst du ein das ganze in ein anderes tag packen zu <div> und dann über innerHTML den inhalt verändern
     
  6. #5 17. Mai 2006
    Ich find DIVs sowieso toller..

    <div id="blubb"></div>

    function pWn(Text,ID)
    {
    document.getElementById(ID).innerHTML=Text;
    }

    ^^
     
  7. #6 17. Mai 2006
    verstehe das ganze mit den <div> gerade überhaupt nicht.
    Frage mich wo ich div einsetzen soll (wwas wird ersetzt) und das mit dem innerhtml? sorry bin in der hinsicht ein kackn00b
     
  8. #7 17. Mai 2006
    divs sind tags die einfach nur einen bereich gruppieren

    haben eigentlich keine wirkliche beudeutung

    innerHTML erlaubt dir den inhalt eines tags zu editieren

    wenn du nun zB ein divtag hast kannst du nun entweder ein bild oder nen text einbaun

    dh du machst zb sowas:

    <div id="editiermich"></div>



    nun kannst du zB ne funktion haben irgendwo die wiefolgt aussieht:

    function editieremichmal(inhalt){
    document.getElementById("editiermich").innerHTML = inhalt;
    }

    inhalt würde dann in den divs sein

    das kann auch htmlcode sein zB ein bild oder nur ein text
     
  9. #8 17. Mai 2006
    habe jetzt die functioin so:
    Code:
    function beschreibung(inhalt){
    document.getElementById("texte").innerHTML = inhalt;
    }
    Und dort wo dann der Text sein soll ist wie folgt:
    Code:
    <div id="texte">
    <tr>
    <td></td>
    <td>Beschreibung für die Reise 1 je nach Auswahl</td>
    <td>Beschreibung für die Reise 2 je nach Auswahl</td>
    <td>Beschreibung für die Reise 3 je nach Auswahl</td>
    </tr>
    </div>
    
    1. Frage stimmt das Überhaupt?
    2. Frage ich möchte zu jedem Bild einen anderen text, wo muss ich diese Texte hinschreiben?

    Thx 4 answers
     
  10. #9 17. Mai 2006
    hm also an deiner stelle würde ich den tds ne id geben da du dann direkt ihren inhalt verändern kannst

    dann kannste oben wo du die bilder veränderst diese entsprechender zeile einfügen
     
  11. #10 17. Mai 2006
    ich hänge mal meine datei an, habe den eindruck das ich viel zu blöd bin um diese sache einzubinden. Hoffe ihr köntt mir dann ganz genau (für dummies) sagen wo ich was einbauen muss.
     
  12. #11 17. Mai 2006
    Code:
    <html>
    <head>
    <title>Buchen - Formular</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script>
    function meldung(wo,m)
     {
     var elem = document.getElementById(wo);
    
     if(elem == null){
     document.write("Ein Element mit der id <b>" + wo + "</b> gibt es nicht.");
     return;
     }
    
     if(elem.firstChild==null)
     elem.appendChild(document.createTextNode(m));
     else
     elem.firstChild.data=m;
     }
    
    function nachname(){
     var nn = buchen.kname.value;
     if(nn.length<3 || nn.length>30){
     buchen.kname.className="err";
     meldung("b", "Bitte geben Sie einen Namen ein, der zwischen 3 und 30 Buchstaben hat.");
     return false;
     }
     else{
     buchen.kname.className="ok";
     meldung("b", "");
     }
    }
    
    function erwachsene(){
     var post = buchen.anzEr.value;
     if(isNaN(post) || (post.length <=0) || (post>100)){
     buchen.anzEr.className="err";
     meldung("c", "Bitte geben Sie eine Zahl zwischwen 1 und 100 ein.");
     return false;
     }
     else{
     buchen.anzEr.className="ok";
     meldung("c", "");
     }
    }
    
    function kinder(){
     var zahl = buchen.anzKin.value;
     if(isNaN(zahl) || (zahl.length <=0) || (zahl>100)){
     buchen.anzKin.className="err";
     meldung("a", "Bitte geben Sie eine Zahl zwischwen 1 und 100 ein.");
     return false;
     }
     else{
     buchen.anzKin.className="ok";
     meldung("a", "");
     }
    }
    
    function isNotMail(email){
     var posAt=email.indexOf("@"),
     posAt2=email.lastIndexOf("@"),
     posPkt=email.lastIndexOf("."),
     laenge = email.length;
    
     if(posAt==-1) return true;
     if( posAt != posAt2 ) return true;
     if(posPkt==-1) return true;
     if(posAt < 3) return true;
     if(laenge - posPkt < 3) return true;
     if(posPkt - posAt < 3) return true;
    
     return false;
    }
    
    function email(){
     var w = buchen.kemail.value;
    
     if( isNotMail(w) ){
     ok = false;
     buchen.kemail.className="err";
     meldung("d","Bitte geben Sie eine richtige E-Mail Adresse ein.");
     }
     else{
     ok = true;
     buchen.kemail.className="ok";
     meldung("d", "");
     }
     return ok;
    }
    
    function isNotDate(d){
    var t,m,j;
    var posPkt1 = d.indexOf(".");
    var posPkt2 = d.lastIndexOf(".");
    
    t = d.substring(0,posPkt1);
    m = d.substring(posPkt1+1,posPkt2);
    j = d.substring(posPkt2+1);
    
    return t>0 && t<32 && m>0 && m<13 && j>0 && j<10000;
    }
    
    function datum1(){
     var s = buchen.vDatum1.value;
    
     if( !isNotDate(s) ){
     ok = false;
     buchen.vDatum1.className="err";
     meldung("e","Bitte geben sie ein gültiges Datum ein.");
     }
     else{
     ok = true;
     buchen.vDatum1.className="ok";
     meldung("e","");
     }
     return ok;
    }
    
    function datum2(){
     var s = buchen.vDatum2.value;
    
     if( !isNotDate(s) ){
     ok = false;
     buchen.vDatum2.className="err";
     meldung("e","Bitte geben sie ein gültiges Datum ein.");
     }
     else{
     ok = true;
     buchen.vDatum2.className="ok";
     meldung("e","");
     }
     return ok;
    }
    
    function datum3(){
     var s = buchen.vDatum3.value;
    
     if( !isNotDate(s) ){
     ok = false;
     buchen.vDatum3.className="err";
     meldung("e","Bitte geben sie ein gültiges Datum ein.");
     }
     else{
     ok = true;
     buchen.vDatum3.className="ok";
     meldung("e","");
     }
     return ok;
    }
    
    function atage1(){
     var post = buchen.tage1.value;
     if(isNaN(post) || (post.length <=0) || (post>40)){
     buchen.tage1.className="err";
     meldung("f", "Bitte geben Sie eine Zahl zwischwen 1 und 40 ein.");
     return false;
     }
     else{
     buchen.tage1.className="ok";
     meldung("f", "");
     }
    }
    
    function atage2(){
     var post = buchen.tage2.value;
     if(isNaN(post) || (post.length <=0) || (post>40)){
     buchen.tage2.className="err";
     meldung("f", "Bitte geben Sie eine Zahl zwischwen 1 und 40 ein.");
     return false;
     }
     else{
     buchen.tage2.className="ok";
     meldung("f", "");
     }
    }
    
    function atage3(){
     var post = buchen.tage3.value;
     if(isNaN(post) || (post.length <=0) || (post>40)){
     buchen.tage3.className="err";
     meldung("f", "Bitte geben Sie eine Zahl zwischwen 1 und 40 ein.");
     return false;
     }
     else{
     buchen.tage3.className="ok";
     meldung("f", "");
     }
    }
    
    var bilder=new Array(0,"deutschland.jpg","australien.jpg","aegypten.jpg","holland.jpg","brasilien.jpg","spanien.jpg","argentinien.jpg","togo.jpg","elfenbeinküste.jpg","kanada.jpg");
    
    var preise=new Array(0, "dpreis", "auspreis", "aegpreis", "holpreis", "brapreis", "epreis", "argp", "togo", "elf", "can");
    
    function wechsel1 () {
     var reiseNr = document.buchen.ziel1.value;
     var bildname = bilder[reiseNr];
     document.getElementById("bild1").src = "Bilder/" + bildname;
     document.getElementById("preis1").innerHTML = preise[reiseNr];
    }
    
    function wechsel2 () {
     var reiseNr = document.buchen.ziel2.value;
     var bildname = bilder[reiseNr];
     document.getElementById("bild2").src = "Bilder/" + bildname;
     document.getElementById("preis2").innerHTML = preise[reiseNr];
    }
    
    function wechsel3 () {
     var reiseNr = document.buchen.ziel3.value;
     var bildname = bilder[reiseNr];
     document.getElementById("bild3").src = "Bilder/" + bildname;
     document.getElementById("preis3").innerHTML = preise[reiseNr];
    }
    
    </script>
    </head>
    <body>
    <form name="buchen">
    <table border=0 width="985">
    <tr>
    <td>Kundenname:</td>
    <td><input name="kname" type="text" size="30" maxlength="30" onBlur="nachname()"></td>
    <td id=b></td>
    <td>Ihr 1. Reiseziel: <select name="ziel1" size="1" onChange="wechsel1()">
    <option value=0 selected>Bitte auswählen</option>
    <option value=1>Deutschland</option>
    <option value=2>Australien</option>
    <option value=3>Ägypten</option>
    <option value=4>Holland</option>
    <option value=5>Brasilien</option>
    <option value=6>Spanien</option>
    <option value=7>Argentinien</option>
    <option value=8>Togo</option>
    <option value=9>Elfenbeinküste</option>
    <option value=10>Kanada</option>
    </select></td>
    </tr>
    
    <tr>
    <td>E-Mail Adresse:</td>
    <td><input name="kemail" type="text" size="30" onBlur="email()"></td>
    <td id=d></td>
    </tr>
    
    <tr>
    <td>Anzahl Erwachsenen</td>
    <td><input name="anzEr" type="text" size="30" maxlength="30" onBlur="erwachsene()"></td>
    <td id=c></td>
    <td>Ihr 2. Reiseziel: <select name="ziel2" size="1" onChange="wechsel2()">
    <option value=0 selected>Bitte auswählen</option>
    <option value=1>Deutschland</option>
    <option value=2>Australien</option>
    <option value=3>Ägypten</option>
    <option value=4>Holland</option>
    <option value=5>Brasilien</option>
    <option value=6>Spanien</option>
    <option value=7>Argentinien</option>
    <option value=8>Togo</option>
    <option value=9>Elfenbeinküste</option>
    <option value=10>Kanada</option>
    </select></td>
    </tr>
    
    <tr>
    <td>Anzahl Kinder</td>
    <td><input name="anzKin" type="text" size="30" maxlength="30" onBlur="kinder()"></td>
    <td id=a></td>
    </tr>
    
    <tr>
    <td>Bemerkungen</td>
    <td><textarea name="text" cols="30" rows="8" wrap="physical" maxlength="100"></textarea></td>
    <td></td>
    <td>Ihr 3. Reiseziel: <select name="ziel3" size="1" onChange="wechsel3()">
    <option value=0 selected>Bitte auswählen</option>
    <option value=1>Deutschland</option>
    <option value=2>Australien</option>
    <option value=3>Ägypten</option>
    <option value=4>Holland</option>
    <option value=5>Brasilien</option>
    <option value=6>Spanien</option>
    <option value=7>Argentinien</option>
    <option value=8>Togo</option>
    <option value=9>Elfenbeinküste</option>
    <option value=10>Kanada</option>
    </select></td>
    </tr>
    
    <tr>
    <td><br></td>
    </tr>
    
    <tr>
    <td></td>
    <td>Reise 1</td>
    <td>Reise 2</td>
    <td>Reise 3</td>
    </tr>
    
    <tr>
    <td>Datum</td>
    <td><input name="vDatum1" type="text" size="30" onBlur="datum1()"></td>
    <td><input name="vDatum2" type="text" size="30" onBlur="datum2()"></td>
    <td><input name="vDatum3" type="text" size="30" onBlur="datum3()"></td>
    <td id=e width="0"></td>
    </tr>
    
    <tr>
    <td>Tage</td>
    <td><input name="tage1" type="text" size="30" onBlur="atage1()"></td>
    <td><input name="tage2" type="text" size="30" onBlur="atage2()"></td>
    <td><input name="tage3" type="text" size="30" onBlur="atage3()"></td>
    <td id=f width="0"></td>
    </tr>
    
    <tr>
    <td>Reise Preis</td>
    <td id="preis1">Hier erscheint dann der erste Preis</td>
    <td id="preis2">Hier erscheint dann der zweite Preis</td>
    <td id="preis3">Hier erscheint dann der dritte Preis</td>
    <td width="0"></td>
    </tr>
    
    <tr>
    <td><br></td>
    </tr>
    
    <tr>
    <td></td>
    <td><img id="bild1" src="Bilder/australien.jpg" height="100" width="160" cellspacing="3"></img></td>
    <td><img id="bild2" src="Bilder/australien.jpg" height="100" width="160" cellspacing="3"></img></td>
    <td><img id="bild3" src="Bilder/australien.jpg" height="100" width="160" cellspacing="3"></img></td>
    </tr>
    
    <tr>
    <td><br></td>
    </tr>
    
    
    <tr>
    <td></td>
    <td>Beschreibung für die Reise 1 je nach Auswahl</td>
    <td>Beschreibung für die Reise 2 je nach Auswahl</td>
    <td>Beschreibung für die Reise 3 je nach Auswahl</td>
    </tr>
    </div>
    
    </table>
    </form>
    </body>
    </html> 
     
  13. #12 18. Mai 2006
    Ok besten dank vorallem an xPliCt.

    Alles wunderbar 10er gibt es wenn ich wieder kann, kumpel hat schon eine gegebn.

    CLOSED
     

  14. Videos zum Thema
Die Seite wird geladen...
Similar Threads - Funktion Text einblenden
  1. Antworten:
    9
    Aufrufe:
    760
  2. Suche Textprogramm (-funktion)

    dasgenie , 16. Juli 2008 , im Forum: Windows
    Antworten:
    6
    Aufrufe:
    277
  3. Antworten:
    0
    Aufrufe:
    431
  4. Antworten:
    2
    Aufrufe:
    302
  5. Antworten:
    1
    Aufrufe:
    166
  • Annonce

  • Annonce