• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

true-false Boolean

Boozking

Neues Mitglied
Hi,
Wenn der Text und das Bild beide sichtbar werden, soll der 2 Button angezeigt werden.
Ich habe das jetzt mit True-False versucht, bin aber am verzweifeln, weil der 2. Button nicht angezeigt wird.
Kann mir jemand helfen?


<!DOCTYPE html> <html> <head> </head> <body> <img style="visibility: hidden;" src="bild.jpg" id="Bild"/> <p style="visibility: hidden;" id="Text">Hallo</p> <button onclick="Bild()">Bild</button> <button onclick="Text()">Text</button> <button style="visibility: hidden;" id="BeidesSichtbar">Beides sichtbar</button> </body> <script> x = new Boolean(false); y = new Boolean(false); function Bild(){ document.getElementById("Bild").style.visibility="visible"; x = true; } function Text(){ document.getElementById("Text").style.visibility="visible"; y = true; } if(x == true && y == true){ document.getElementById("BeidesSichtbar").style.visibility="visible"; } </script> </html>
 
Werbung:
Ich weiß nicht wo das wahr , aber irgendwo hat gester oder heute mal einer gesagt das man sowas mit Klassen machen könnte.
Deinen onclick Mist kannst du auch weglassen meiner Meinung nach.
Einige sagen zwar das die da keinen Grund für sehen , aber meiner Meinung nach ist es Mist und nervt mich.

Ok hier mit Klassen und ohne onclick
Sieht vieleicht etwas kompliziert aus, aber es zeigt dir wie man Klassen abfragt und auch toggleclass nutzen kann.
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
  .bildaus,.textaus,#BeidesSichtbar{
    display:none;
  }
  .an{
    display:block;
  }
  </style>
</head>
<body>
<img class="bildaus" id="bild" src="bild.jpg">
<p class="textaus" id="Text">Hallo</p>
<button id="Bildan">Bild</button>
<button id="Textan">Text</button>
<button id="BeidesSichtbar">Beides sichtbar</button>

<script>
  var el1=document.getElementById('Text');
  var el2=document.getElementById('bild');
document.getElementById("Bildan").addEventListener('click',function(){
     el2.classList.toggle('an')
     weiter(el1,el2);
});
document.getElementById("Textan").addEventListener('click',function(){

     el1.classList.toggle('an')
     weiter(el1,el2)
})


function weiter(el1,el2){
      var but=document.getElementById("BeidesSichtbar");
      if(el1.classList.contains('an')==true && el2.classList.contains('an')==true){
          but.style.display='block';
      }else{
          but.style.display='none';
      }
}
</script>
  </body>
</html>
 
Werbung:
Habe jetzt nach deinen Ansätzen weiter gemacht und bin gut vorangekommen.
Aber plötzlich erschienen gar keinen Buttons und Texte mehr.:frown:
Habe versucht zu Debuggen, geht aber auf Brackets nicht so wirklich gut.
Kann mir jemand weiterhelfen? Bin nach 1 Stunde Fehlersuche echt am verzweifeln.
(Sorry wegen dem vielen Code)

HTML:
<!DOCTYPE html>
<html>

<style>
.aus{
   display: none;
}
.an{
   display: block;
}

</style>
<body>

<img class="aus" style="visibility: hidden; float: left;" src="picture.jpg" width="200" height="200" style="border: 0px;" id="myP"/>
<img class="aus" style="visibility: hidden; float: left;" src="picture2.jpg" width="200" height="200" style="border: 0px;" id="myP2" />
<img class="aus" style="visibility: hidden; float: left;" src="picture3.jpg" width="200" height="200" style="border: 0px;" id="myP3"/>
<img src="../../Downloads/3Bild.jpg" width="200" height="200" style="border: 0px;" />

<button style="margin-left: 0px;" type="button" onclick="myFunction()">Bild1</button>
<button type="button" onclick="myFunction2()">Bild2</button>
<button type="button" onclick="myFunction3()">Bild3</button>
<button type="button" onclick="myFunction4()">Alles L&ouml;schen</button>


<p class="aus" id="Text1" style="visibility: hidden; float: left; margin-top: 230px; margin-right: 0px;">Text1</p>
<p class="aus" id="Text2" style="visibility: hidden; float: left; margin-top: 230px; margin-left: 30px; margin-right: 30px;">Text2</p>
<p class="aus" id="Text3" style="visibility: hidden; float: left; margin-top: 209px; margin-right: px;">Text3</p>

<button type="button" onclick="myFunction5()">Text1</button>
<button type="button" onclick="myFunction6()">Text2</button>
<button type="button" onclick="myFunction7()">Text3</button>

<a href=""><button id="Sichtbar" style="visibility: hidden;">Alles sichtbar</button></a>

<script>

function myFunction() {
  document.getElementById("myP").style.visibility="visible";
  document.getElementById("myP2").style.visibility="hidden";
  document.getElementById("myP3").style.visibility="hidden";
  document.getElementById("myP").classList.toggle('an');
  weiter();
}

function myFunction2() {
  document.getElementById("myP2").style.visibility="visible";
  document.getElementById("myP").style.visibility="hidden";
  document.getElementById("myP3").style.visibility="hidden";
  document.getElementById("myP2").classList.toggle('an');
  weiter();
}

function myFunction3() {
  document.getElementById("myP3").style.visibility="visible";
  document.getElementById("myP2").style.visibility="hidden";
  document.getElementById("myP").style.visibility="hidden";
  document.getElementById("myP3").classList.toggle('an');
  weiter();
}

function myFunction4() {
  document.getElementById("myP").style.visibility="hidden";
  document.getElementById("myP2").style.visibility="hidden";
  document.getElementById("myP3").style.visibility="hidden";
  document.getElementById("Text1").style.visibility="hidden";
  document.getElementById("Text2").style.visibility="hidden";
  document.getElementById("Text3").style.visibility="hidden";
}

function myFunction5() {
    document.getElementById("Text1").style.visibility="visible";
    document.getElementById("Text1").classList.toggle('an');
    weiter();
}

function myFunction6() {
    document.getElementById("Text2").style.visibility="visible";
    document.getElementById("Text2").classList.toggle('an');
    weiter();
}

function myFunction7() {
    document.getElementById("Text3").style.visibility="visible";
    document.getElementById("Text3").classList.toogle('an');
    weiter();
}

function weiter(){
    if(document.getElementById("myP").classList.contains('an')==true && document.getElementById("Text1").classList.contains('an')==true){
          document.getElementById(Sichtbar").style.visibility="visible";}
        
    
    if(document.getElementById("myP").classList.contains('an')==true && document.getElementById("Text2").classList.contains('an')==true){
          document.getElementById("Sichtbar").style.visibility="visible";}
        
    
    if(document.getElementById("myP").classList.contains('an')==true && document.getElementById("Text3").classList.contains('an')==true){
          document.getElementById("Sichtbar").style.visibility="visible";}
        
    
    if(document.getElementById("myP2").classList.contains('an')==true && document.getElementById("Text1").classList.contains('an')==true){
          document.getElementById("Sichtbar").style.visibility="visible";}
        
  
    if(document.getElementById("myP2").classList.contains('an')==true && document.getElementById("Text2").classList.contains('an')==true){
          document.getElementById("Sichtbar").style.visibility="visible";}
        
    
    if(document.getElementById("myP2").classList.contains('an')==true && document.getElementById("Text3").classList.contains('an')==true){
          document.getElementById("Sichtbar").style.visibility="visible";}
        
    
    if(document.getElementById("myP3").classList.contains('an')==true && document.getElementById("Text1").classList.contains('an')==true){
          document.getElementById("Sichtbar").style.visibility="visible";}
        
    
    if(document.getElementById("myP3").classList.contains('an')==true && document.getElementById("Text2").classList.contains('an')==true){
          document.getElementById("Sichtbar").style.visibility="visible";}
        
    
    if(document.getElementById("myP3").classList.contains('an')==true && document.getElementById("Text3").classList.contains('an')==true){
          document.getElementById("Sichtbar").style.visibility="visible";}
}else{
    document.getElementById("Sichtbar").style.display="none";
}

</script>
</body>
</html>
 
Ich weiß nicht wo das wahr , aber irgendwo hat gester oder heute mal einer gesagt das man sowas mit Klassen machen könnte.
Ich glaube @basti1012 meint meine Antwort in diesem Thread.

@Boozking: Schau' dir als erstes mal dein Javascript an. Das enthält ein paar Fehler.
Tip: Schau beim Ausführen deines Programs mal in den Entwicklerwerkzeugen deines Browsers in die Konsole. Dort werden dir Laufzeitfehler mit sehr guter Fehlerbeschreibung angezeigt.
Ich persönlich habe beim Entwickeln die Konsole immer auf. (Sie ist auch bestens dazu geeignet, das Browserfenster für Testzwecke verkleinern ;) )
 
Super Tipp das mit der Konsole!:smile:
Konnte so grobe JS Fehler beheben.

toogle --> toggle und else-Klammer richtig gesetzt

Buttons und Bilder werden auch wieder angezeigt.
Nur der "Alles Sichtbar" Button will um alles in der Welt nicht erscheinen.:rolleyes:
Hat jemand einen Tipp dieses letzte Proplem zu lösen?
Bin echt dankbar für eure Antworten.
 
Werbung:
Könntest du mal kurz erklären was du da vor hast?
Auf den ersten Blick sollte das alles viel leichter und kürzer gehen.
Ich glaube @basti1012 meint meine Antwort in diesem Thread.
Ja das stimmt.
@Boozking , kann das sein das du erst bild1 klicken willst , dann soll button text1 kommen ?
Wenn beides angeklickt wurde soll Button bild2 kommen und wenn du den klickst dann soll button text2 kommen und so weiter ????

Ich würde es dann ganz anders machen.
Erklären kann ich nicht, deswegen warte mal kurz auf ein beispiel von mir
 
Man soll eines der Bilder oder einen der Texte erscheinen lassen, egal in welcher Reihenfolge.
Also es werden immer die Buttons für die Texte und die Bilder angezeigt. (Alle 6 Stück)
Doch wenn einer der Texte und eins der Bilder sichtbar gemacht worden sind, soll ein weiterer Button erscheinen, hier:
Code:
<a href=""><button id="Sichtbar" style="visibility: hidden;">Alles sichtbar</button></a>
 
also wenn bild1 und text1 sichtbar ist dann sollen die buttons für bild2 und text2 erscheinen ?
Oder sind alle 6 buttons immer sichtbar, und erst wenn alle bilder und texte sichtbar sind soll der alles sichtbar button kommen ?
 
Werbung:
Alle 6 Buttons sind immer sichtbar.
Und wenn eines der Bilder und einer der Texte sichtbar gemacht wird, soll der "Alles Sichtbar Button" erscheinen
 
@Boozking: ich kann mir zwar nicht so genau vorstellen, was das mal werde soll aber so wie du es beschrieben hast, würde ich das machen.

1. Ich würde mir alle Elemente der Bilder und Texte in jeweils einem Array speichern.
2. Wenn ein Element seine Sichtbarkeit ändert, würde ich mit Array.prototype.some überprüfen, ob jedes Array ein sichtbares Element enthält und danach die Sichtbarkeit des "Alles Sichtbar Buttons" steuern.
 
Ich habe das jetzt anders gemacht.
Aber mit dem Beispiel könntest du das vielleicht auch selber umbauen.

Bei dein Vorhaben gibt es bestimmt 20 Möglichkeiten wie man das umsetzen kann.
Ich persönlich versuche einen Code so kurz wie möglich zu halten.
In deinen Code rufst du über 50-mal document.getElementById(.... auf.
Du hast aber nur 8 Elemente die gebraucht werden.(Verstehst du was ich meine?).
Ich schmeiße mal nee Lösung in Raum.


Link zur Lösung


ist jetzt nee Lösung die vielleicht für Anfänger nicht die leichteste ist, aber mal schauen.
@AndreasB scheint mir neu bei uns in den Foren zu sein, laut seinen Beiträgen überall hat er wohl auch ahnung.
Ich schmeiße mal die Tastatur zu ihm.
Vielleicht hat er auch mal Lust seinen Weg zuzeigen.
Vielleicht machen noch mehr mit damit du mal sehen kannst was für verschiedene Möglichkeiten es gibt.
Edit: Der Button erscheint bei mir erst, wenn alle 3 Bilder und Texte sichtbar sind. Wie gesagt da kannst du dir dann ja um friemeln
 
Zuletzt bearbeitet:
Werbung:
@Boozking: Ich habe auch mal einen Pen erstellt.
Mein Fokus lag dabei weniger auf Kürze, als auf Lesbarkeit und Wartbarkeit.
Außerdem habe ich einige Kommentare hinzugefügt, um das Verständnis des Codes zu erleichtern.

Die HTML Elemente, besitzen data-attribute, um das Selektieren im Javascript zu erleichtern.
Der CSS-Style des Programs beschränkt sich auf die Funktionalität für das Ein- und Ausblenden der Elemente.
Das Program verwendet Javascript ES6. Ich habe aber versucht nicht zu viele Features davon zu verwenden.

Ich hoffe das hilft dir.
 
Echt nett von euch das ihr mir so geholfen habt :)
Eure Erklärungen waren auch sehr hilfreich. :smile:
Habe das Thema jetzt gut verstehen können.
 
Werbung:
Zurück
Oben