✔ Problem mit Einblenden von Texten via JS

T

the_nobody000

Grünschnabel
Hiho!

Hoffe irgendjemand kann mir weiter helfen, da ich seit 4h davor sitz und einfach nicht weiterkomm.

Ich möchte mit einem Klick auf eine Checkbox an verschiedenen Stellen im Dokument Text unterschiedlicher Art einfügen. Bisher bekomm ich es leider nicht hin, dass es an zwei verschiedenen Stellen funktioniert. Nur das Einfügen des ersten Aufrufes findet statt sprich der Text "text ebene1 Erster Aufruf" wird eingeblendet die Zweite wird gar nicht erst angesprochen.

Code: 
<script type="text/javascript">
 <!--
 function einblenden(div)
 {
 document.getElementById(div).style.display = "block";
 }
 function ausblenden(div)
 {
 document.getElementById(div).style.display = "none";
 }
 //-->
</script>
	
		
<input type="checkbox" onClick="einblenden('ebene1');" onClick="ausblenden('ebene1');">Ebene 1 einblenden	
<input type="checkbox" onClick="einblenden('ebene2');" onClick="ausblenden('ebene2');">Ebene 2 einblenden
<div id="ebene1" style="display:none;">text ebene1 Erster Aufruf</div>
<p> 
<div id="ebene2" style="display:none;">text ebene2</div>
<p>
<div id="ebene1" style="display:none;">text ebene1 Zweiter Aufruf</div>
</div>

Hab auch schon die Suchfunktion benutzt find aber nix passendes wenn mir jemand weiterhelfen könnte und eventuelle Änderungen an meinem Script vornehmen könnte damit es funktioniert wäre ich wirklich sehr dankbar.

Danke im Voraus !
Grüße
the_nobody000
 
Zuletzt bearbeitet:
Morgääääää...,

Das kann so nicht gehen:

<input type="checkbox" onClick="einblenden('ebene1');" onClick="ausblenden('ebene1');">Ebene 1 einblenden
<input type="checkbox" onClick="einblenden('ebene2');" onClick="ausblenden('ebene2');">Ebene 2 einblenden

IDs düfen nur einmal vergeben werden (ebene1).

Willst Du mit dem zweiten Aufruf wirklich einen weiteren Div anzeigen oder wieder den ersten, etwas verwirrend das ganze?

Versuchs mal, ob Dir das weiterhilft:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">  
    <title>
    </title>
<script type="text/javascript">
var zaehler=0;
function setDiv(e,s) {
  document.getElementById(e).style.display = s;
}
function blendMe(cb,e) {
  if (document.getElementById(cb.id).checked) {
     setDiv(e,"block");
  } else {
     setDiv(e,"none");
  }
  if ((cb.id=="cb1")&&(document.getElementById(cb.id).checked)) {
    zaehler+=1;
    if (zaehler>1) {
      alert("Wie die Zeit vergeht. Schon der "+zaehler+". Aufruf von ebene1!!");
    }
  }
}   
  
</script>  
  </head>  
  <body>   
    <input id="cb1" type="checkbox" onClick="blendMe(this,'ebene1');">Ebene 1 einblenden         
    <input id="cb2" type="checkbox" onClick="blendMe(this,'ebene2');">Ebene 2 einblenden           
    <div id="ebene1" style="display:none;background-color:red;">text ebene1 Erster Aufruf     
    </div>             
    <div id="ebene2" style="display:none;background-color:blue;">text ebene2       
    </div>                
    <div id="ebene_ENN" style="display:none;">text ebene1 Zweiter Aufruf         
    </div>  
  </body>
</html>

Grüße
Idi
 
Zuletzt bearbeitet von einem Moderator:
Wenn man die Funktion sowie den Aufruf um 2 Parameter erweitert, dann klappt sowohl das Einblenden der verschiedenen Bereiche als auch das Ausblenden.

Zudem reicht dann eine Funktion völlig aus.


HTML: 
<script type="text/javascript">
function einblenden(div, anzahl, box) {

for (a = 1; a <= anzahl; a++) {
	if (document.getElementById(box).checked == true) {
		document.getElementById(div + '_' + a).style.display = "block";
	} else {
		document.getElementById(div + '_' + a).style.display = "none";
	}
}

}
</script>

<p>
<input type="checkbox" id="check1" onclick="einblenden('ebene1', 2, 'check1');">Ebene 1 ein-/ausblenden
<br />
<input type="checkbox" id="check2" onclick="einblenden('ebene2', 1, 'check2');">Ebene 2 ein-/ausblenden
</p>
<div id="ebene1_1" style="display:none;">text ebene1 Erster Aufruf</div>
<div id="ebene2_1" style="display:none;">text ebene2</div>
<div id="ebene1_2" style="display:none;">text ebene1 Zweiter Aufruf</div>
 
Erst einmal vielen Dank für Eure rasche Antworten :-).
Ich glaub hatte mein Problem au bissle umständlich geschildert aber tombe hatte es wunderbar hingekriegt :-) :-) :-) vielen Danke für die Hilfe au Dir Netzwerkidi.

Grüße und Dankeschön
the_nobody000
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück