Rahul Rahul - 4 months ago 8
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">


<thead>
...lots of trs and tds

</thead>

<tbody>
...lots of trs and tds

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


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

Answer

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