Funktion Text einblenden oder wechsel bei onchange

passi87 · 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

Anzeige

xPliCt · 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

passi87 · 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.

xPliCt · 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

siNT · 17. Mai 2006

Ich find DIVs sowieso toller..

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

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

^^

passi87 · 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

xPliCt · 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

passi87 · 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

xPliCt · 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

passi87 · 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.

xPliCt · 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>

passi87 · 18. Mai 2006

Ok besten dank vorallem an xPliCt.

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

CLOSED

Nützliche Suchen

Funktion Text einblenden oder wechsel bei onchange

Videos zum Themenbereich