[Javascript] Bild bei Klick wechseln

[Saad]

Hey, ich hab da mal kurz eine Frage und zwar.
Ich habe jetzt mal ein HTML-Dokument und eineJavascript-Dokument.
Das Javascript-Dokument ist im HTML-Dokument verlinkt mit folgendem "Code" im Head-Bereich.

<script language="javascript" type="text/javascript" src="jscript.js"></script> 

Soo nun habe ich ein Div mit der ID boxEins( Höhe und Breite sind 100 und es hat einen Umrandung die 1px dick ist und die Farbe rot hat).
So nun möchte ich, dass, wenn ich auf die Box klicken, sich das Bild im Div ändert..das Ganze soll mit JavaScript gemacht werden,nur habe ich iwie voll keinen Plan wie ich das machen soll :/

Könnte mir jmd. vlt helfen?

[3lit]

jquery einbinden.

$(document).ready(function() {
    $('#boxEins').on('click', function() {
        $(this).html($('<img/>', {
            'src'; 'bild.png',
            'alt': ''
        }));
    });
}); 

[Mr. White]

Gib dem Bild einen Namen. Und im onclick-Attribut des divs lässt du folgendes ausführen:

document.images['bild_name'].src = 'pfad_zum_neuen_bild'

[Saad]

Hm, ich habe das mal jetzt anderes gelöst und zwar so:

function klicken() {
var element = document.getElementById('kal1');
element.style.backgroundImage = 'url(Bilder/bild1.jpg)';
}
und im div ruf ich dann eben die Funktion auf. Nur das einzige Problem ist jetzt, dass sich der Text, der vorher im Div war, noch immer da ist und sich nicht löscht :b
Wie kann ich den jetzt löschen?

haha danke dir DMW, habs genau in dem Moment im Skriptum gefunden :p

[DMW007]

element.innerHTML = '';

[Saad]

So eine Frage hätte ich da noch und zwar: Ich hab jetzt 10 Divs.
Das erste Div hat die ID Box1, das nächste hat die ID Box2 usw.. In jeder Box ist jetzt eine Nummer ( von 1 -10...also das DIV mit der ID Box1 hat 1 im DIV stehen und das DIV mit der ID Box2 hat im DIV ne' 2 stehen usw..)
Jetzt habe ich ein Formular mit einem <input type="text" name="suchen" /> und einem <input type="button" name="sucheBox" value="Suchen" />.
So der Benutzer kann jetzt eben im Textfeld sagen wir mal 2 eingeben und dann auf Suchen klicken und nun musst jetzt eben dieser Div-Container mit der 2 mit einer Umrandung versehen werden.. wie bekomem ich das nun hin :b

[DMW007]

var element = document.getElementById('box2');
if(element != null) {
    element.style.border = '5px solid blue';
}

[Saad]

Hm, das verstehe ich nicht wirklich. Warum element != NULL?
Der Benutzer kann ja außerdem auch z.B 1 eingeben oder 7 oder 9 usw..

Mein Ansatz ist folgender:

textfeld hat die id suchFeld..

function suchen() {

var anzahl = document.getElementById('suchFeld').value;

switch(anzahl){
case 1:
var element = document.getElementById('kal1');
element.style.borderColor = "black";

case 2:
....
case 3:
....

}
}

und diese Function rufe ich dann im <input type="button" /> tag auf, aber irgendwie tut sich da nichts :b

[DMW007]

Ich bin davon ausgegangen, dass du den Integer aus dem Formular als ElementID übergibst.
Wenn der User eine Zahl eingibt die nicht als ID existiert ist element null.
Wenn dann auf eine Funktion/Eigenschaft oder sonstwas des nicht initialisierten Objektes element zugegriffen wird, wirft JS eine Exception und der JS-Parser stoppt die Ausführung.

[Saad]

Achso.. Mit switch sollte das mehr oder weniger doch funktionieren.. nur das Problem ist nun, dass bei dieser Zeile

 var anzahl = document.getElementById('suchFeld').value; 

der Value irgendwie nicht übernommen wird, kp wieso.