div mit js anzeigen (onclick --> immer nur eines: problem)
jsnoob
- javascript
Hallo!
Ich habe heute etwas mit Javascript angefangen und ich glaube ich habe mich da dann etwas verlaufen.
Ich habe eine Liste. Jede Liste hat Informationen welche man erst nach einem Klick auf ein Bild sehen soll.
<div display:block; id="show-1">
<img style="cursor:pointer;" src="bild1.gif" onclick="funktion('1');"/>
</div>
<div style="display:none;" id="hide-2">
<img style="cursor:pointer;" src="bild2.gif" onclick="funktion(2)"/>
</div>
<div id="id-1" style="display:none;">
<span>jetzt soll man das hier sehen können</span>
</div>
So... nun habe ich mir gedacht: wenn man auf bild 1 klickt, dann erscheint der text und das bild wird ein anderes (bild2). Wenn man auf das neue Bild klickt, dann verschwindet der Text und das Bild wird wieder das alte.
Das funktioniert auch schon ganz gut soweit.
Nur ich habe eine Liste mit X Elementen.
Jedes Listenelement soll diese funktion haben. Also jedes Element in der Liste hat dieses Bild1 und diesen Text den man nach klick auf das Bild sieht.
Es soll immer nur eines geöffnet sein. Also Wenn ich eines offen habe und auf ein anderes klicke, dann soll das erste zu gehen und das zweite soll sich öffnen. das habe ich auch schon hin bekommen. nur das mit den bildern stimmt noch nicht. Es ändert sich das bild nicht. Ich finde da keinen fehler. Seht ihr einen? Hier mein js code:
var opened;
function funktion(module){
var id = 'id-' + module;
var object = document.getElementById(id);
if(opened == null)
opened = '';
if(opened == '' || opened == id)
{
if(object.style.display == 'none')
{
object.style.display='block';
document.getElementById('hide-' + module).style.display = 'block';
document.getElementById('show-' + module).style.display = 'none';
opened = id;
}
else if(object.style.display == 'block')
{
object.style.display='none';
document.getElementById('hide-' + module).style.display = 'none';
document.getElementById('show-' + module).style.display = 'block';
opened= '';
}
}
else if(opened != '' && opened != id)
{
//hide the opened first
var stillopen = opened;
var doctoclose = document.getElementById(stillopen);
doctoclose.style.display = 'none';
opened = '';
//changing the icon
document.getElementById('hide-' + module).style.display = 'block';
document.getElementById('show-' + module).style.display = 'none';
//then show the new one
var opennow = document.getElementById(id);
opennow.style.display = 'block';
opened = id;
}
}
Ich sehe nirgend in deiner Funktion das du das Bild austauschst.
document.getElementById("imgTag").src = "pic2";