Explanation of a function

JavaScript
1

I understand this script except for the notation in: “popup_elem.style.display == ‘block’ ? popup_elem.style.display = ‘none’ : popup_elem.style.display = ‘block’;” Can you explain it for me please?

Complete script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
/*<![CDATA[*//*---->*/
function popup(popup_name) {

popup_elem=document.getElementById(popup_name);
popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';
}
/*--*//*]]>*/
</script>
<style type="text/css">
#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }
.middle {height:100%; display:table; margin:0 auto;}
.inner {vertical-align:middle; display:table-cell;}

#firstPopupDiv {width:100px;height:100px;background-color:red;margin:40px 0px 0px 0px;}
</style>

<!--[if IE]>
 <style>
#outer {filter: alpha(opacity = 75);}
 </style>
<![endif]-->

<!--[if lte IE 7]>
 <style>
  /* centering for ie6/ie7 */
  .middle { position:absolute; top:50%; left:50%; height:auto;  z-index:999;}
  .inner { position:relative; top:-50%; left:-50%; }
 </style>
<![endif]-->

</head>
<body>
<h1 style="float:left;"><a href="javascript:void(0);" onclick="popup('outer')">Click Here To Open The Pop Up</a></h1>

<div id="outer" onclick="popup('outer')">
<div class="middle">
<div class="inner">

<div id="firstPopupDiv"> 
<p>You are here.</p>
</div>

</div>
</div>
</div>

</body>
</html>
2

The expression is a ternary.

Basically it’s a short form of

if(popup_elem.style.display == 'block' ) {
      popup_elem.style.display = 'none';
} else {
      popup_elem.style.display = 'block';
}
3

It’s a ternary statement as was said, but it really is bad form for each clause to execute different statements, because it can then be harder to understand what those parts do.

A better solution is to use the ternary statement to assign one value or another to the CSS property itself.

For example:


popup_elem.style.display = (popup_elem.style.display === 'block') ? 'none' : 'block';
4

OK, based on http://www.w3schools.com/JS/js_comparisons.asp

How does that toggle the popup?

5

As shown in either post 2 or post 3.

6

I think I just got it. (popup_elem.style.display == ‘block’) refers to display:none; in #outer right?

7

That’s right. JavaScript doesn’t change the CSS code, it just adds a style attribute on to the element and updates the CSS declarations on that inline style attribute.

8

Thank you very very much to webdev1958 and paul_wilkins. This has been one of the most satisfying topics ever! javascript has always challenged me for reasons I don’t completely understand. php, msql, css, and html seem so straight forward compared to js. This helped a lot.

Thanks Again,

Niche