Rahul Rahul - 2 months ago 5x
HTML Question

hide/show a table onclick not working inside div

I have a table inside a div element

<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">

...lots of trs and tds


...lots of trs and tds


On clicking the text it should call showE1 and hide/display the table. When i debug it , it enters the function showE1 onclick but display is not changing. Is there a rookie mistake that i'm making ?

function showE1()

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


The ternary operator will return "none" if "block" is truthy, and "block" if it isn't. Since "block" is a constant and evaluates to truthy

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

Will always return "none". Were you going for this?

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