-1

First question ever here. I'm a bit nervous to break the ice, please be indulgent I just finished the CodeAcademy JS lessons.

In the following code that I found to toggle some of my #element, I guess that it switches my class.property from its initial state to "block", and from "block" to its initial state. Correct me if I'm wrong. But if I'm not, can someone explain to me how does this is performed? 

class.property === 'value' ? '' : 'value';

Question Mark in JavaScript - condition ? value-if-true : value-if-false

At this point I understand that ' ' is equal to 'none', it makes sense. Then it finally pass this property conditon value-if-true and value-if-false to my #element (which is trigged with some onclick(). But what if now I want that my function to also trigger some section position:?

I tried to add this, but it failed. I also don't understand why using (function() {})();

  (function (style) {
    style.display = style.display === 'fixed' ? 'absolute' : 'fixed';
})(document.getElementById(section).style);

Here is the original code :

function toggledisplay(elementID) {
    (function (style) {
        style.display = style.display === 'block' ? '' : 'block';
    })(document.getElementById(elementID).style);
};
Community
  • 1
  • 1
Leo Seyers
  • 31
  • 6
  • That's horrible code. It should have been just `var style = document.getElementById(elementID).style;` – Bergi May 18 '16 at 03:05
  • Not certain what Question is? Does `js` at OP not return expected result? – guest271314 May 18 '16 at 03:06
  • What you're using is called a [Conditional (ternary) Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) – Michael Schwartz May 18 '16 at 03:09
  • @Arista A function declared like this `(function (){})();` is called an anonymous function and can only be called right where it is declared. For that reason functions declared like this almost always return some sort of object value to be used throughout the script. Generally I would stay away from using this type of function unless you are creating a js library like [jquery](https://jquery.com/) – Andrew Bonsall May 18 '16 at 03:28
  • hi guys, always a bit harsh to dissect codes at the beginings but very uselful, thank you all for your lights! – Leo Seyers May 18 '16 at 14:25

1 Answers1

1

fixed and absolute are position values not display

function toggledisplay(elementID) {
  var style = document.getElementById(elementID).style;
  style.position = style.position === 'fixed' ? 'absolute' : 'fixed';
};
body {
  position: relative;
}
#mydiv {
  top: 50px;
  left: 80px;
  min-height: 100px;
  width: 100px;
  background-color: lightgrey;
}
<button onclick="toggledisplay('mydiv')">Toggle</button>
<div id="mydiv"></div>

Note: There is no real need to have the IIFE function, you can simply use a variable to refer to the style property

Arun P Johny
  • 365,836
  • 60
  • 503
  • 504
  • Can you please remove that unnecessary function declaration inside the first function declaration. There is literally no reason to call an anonymous function like that and is a bad programming practice. – Andrew Bonsall May 18 '16 at 03:11
  • 1
    @AndrewBonsall yes, kept it only because OP had it – Arun P Johny May 18 '16 at 03:14