javascript - false statement not executed by ternary operator -

in following code, ternary operator isn't assigning value if condition returns false!

<script>                 function lgn() {                     document.getelementbyid('overlay').style.display = 'none' ? 'block':'none';                     document.getelementbyid('lgn').style.display = 'none' ? 'block':'none';                 } </script> 

i trying make overlay on webpage, following twig:

<div class="nvg">                 <ul>                     {% block links %}                     <li class="n.link"><span class="fa fa-times close" onclick="lgn()"></span></li>                     {% endblock %}                 </ul> </div> 

and

{% block overlay %}         {{ form_start(form, {'attr':{'id':'lgn'}}) }}         <span class="fa fa-times close" onclick="lgn()"></span><br />         <span>login:</span>         {{ form_widget(form.email, {'attr':{'placeholder':'email'}}) }}         {{ form_widget(form.pass, {'attr':{'placeholder':'password','class':'pass'}}) }}         {{ form_end(form) }} {% endblock %} 

please help...

your ternary doesn't make sense.

document.getelementbyid('overlay').style.display = 'none' ? 'block':'none'; 

there's no logical evaluation make, , string (mostly) evaluated true. this:

document.getelementbyid('overlay').style.display = (document.getelementbyid('overlay').style.display == 'none') ? 'block' : 'none'; 

your best solution (in terms of cleanliness) make selectors variables.

function lgn() {     element1 = document.getelementbyid('overlay');     element1.style.display = (element1.style.display == 'none') ? 'block' : 'none';      element2 = document.getelementbyid('lgn');     element2.style.display = (element2.style.display == 'none') ? 'block' : 'none'; }