hide/show Tisch Onclick nicht in div Arbeits

Question

ich einen Tisch in einem div-Element haben

<div id="E" ng-model="total"> 
    <div ng-if="total.passfail" onclick="showE1()">{{total.passfail}} scripts Passed in {{Listbox}} and failed in {{Comparebox}}</div> 
    <table width="100%" id="E1">        
     <thead> 
      ...lots of trs and tds         
     </thead> 

     <tbody> 
      ...lots of trs and tds 
     </tbody> 
    </table> 
</div> 

Auf Klick auf den Text, um ihn showE1 nennen sollte und verstecken/die Tabelle anzuzeigen. Wenn ich es debugge, tritt es in die Funktion showE1 onclick ein, aber die Anzeige ändert sich nicht. Gibt es einen Anfängerfehler, den ich mache?

function showE1(){ 
     document.getElementById("E1").style.display = "block" ? "none" : "block"; 
} 

Answer 1

Der ternäre Operator zurückkehren wird "none", wenn "Block" truthy ist, und "Block", wenn es nicht ist. Da "Block" eine Konstante ist und zu truthy

document.getElementById("E1").style.display = "block" ? "none" : "block"; 

wird immer "none" zurückgeben. Wolltest du das?

document.getElementById("E1").style.display = (document.getElementById("E1").style.display == "block") ? "none" : "block"; 

Answer 2

Sie machen eine Inline-if-Anweisung, aber Ihr Logiktest ist einfach "Block". Wenn Sie Javascript "block?" Fragen, führt dies nicht zu einem wahren/falschen Ergebnis. Sie müssen testen, ob der aktuelle Wert gleich "block" ist.

Answer 3

Für mich funktioniert es so wie du es getan hast.

   function showE1() 
 
       { 
 

 
        document.getElementById("E1").style.display = "block" ? "none" : "block"; 
 
       }

   <div id="E" ng-model="total"> 
 
       <div ng-if="total.passfail" onclick="showE1()">{{total.passfail}} scripts Passed in {{Listbox}} and failed in {{Comparebox}}</div> 
 

 

 
        <table width="100%" id="E1"> 
 

 

 
         <thead> 
 
          <tr><td>Something</td></tr> 
 

 
         </thead> 
 

 
         <tbody> 
 
          <tr><td>Something else</td></tr> 
 

 
         </tbody> 
 
        </table> 
 
</div>

Überprüfen Sie, ob der Code auf der Testplattform läuft, ist eigentlich diejenige, die Sie als Frage stellen.