Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #16175 > unrolled thread

Question about reference to style properties

Back to article view | Back to comp.lang.javascript

Contents

  Question about reference to style properties Erwin Moller <erwinmollerusenet@xs4all.nl> - 2012-09-27 09:55 +0200
    Re: Question about reference to style properties Gregor Kofler <usenet@gregorkofler.com> - 2012-09-27 10:08 +0200
      Re: Question about reference to style properties Erwin Moller <erwinmollerusenet@xs4all.nl> - 2012-09-27 10:25 +0200
        Re: Question about reference to style properties Gregor Kofler <usenet@gregorkofler.com> - 2012-09-27 14:03 +0200
        Re: Question about reference to style properties Martin Honnen <mahotrash@yahoo.de> - 2012-09-27 14:01 +0200
          Reference basics  (Was: Question about reference to style properties) Erwin Moller <erwinmollerusenet@xs4all.nl> - 2012-09-27 14:46 +0200
            Re: Reference basics  (Was: Question about reference to style properties) Martin Honnen <mahotrash@yahoo.de> - 2012-09-27 15:09 +0200
            Re: Reference basics  (Was: Question about reference to style properties) Gregor Kofler <usenet@gregorkofler.com> - 2012-09-27 15:16 +0200
            Re: Reference basics (Was: Question about reference to style properties) Scott Sauyet <scott.sauyet@gmail.com> - 2012-09-27 06:35 -0700
              Re: Reference basics (Was: Question about reference to style properties) Scott Sauyet <scott.sauyet@gmail.com> - 2012-09-27 06:42 -0700
              Re: Reference basics (Was: Question about reference to style properties) Erwin Moller <erwinmollerusenet@xs4all.nl> - 2012-10-01 09:14 +0200

#16175 — Question about reference to style properties

Hi clj,

Please consider the following 2 examples:

Example1: (works as intended)
=========================================================
<span class="ahrefmimic"
  onClick="var curStyle =
    document.getElementById('techdiv').style;
    curStyle.display=((curStyle.display=='block')?'none':'block');
">on/off</span>
<div id="techdiv" style="display:none;">
....
</div>
=========================================================


Example2: (Doesn't work as intended, but no errors)
=========================================================
<span class="ahrefmimic"
  onClick="var curStyleDisp =
    document.getElementById('techdiv').style.display;
    curStyleDisp=((curStyleDisp=='block')?'none':'block');
">on/off</span>
<div id="techdiv" style="display:none;">
....
</div>
=========================================================


Example 1 works as (I) intended: It makes div techdiv appear and 
disappear when clicking on 'on/off'.
The second example doesn't do anything (no error message either).

The only difference (I see) is that the first puts a reference to the 
style to curStyle, and the second example put the style.display into the 
reference named curStyleDisp and manipulates that.

While debugging, I added an alert at the end of the line:
example1: alert(typeof curStyle) <-- Object
example2: alert(typeof curStyleDisp) <-- String

My question:
In example2, am I just changing the value of a String that has no 
connection to the original style.display property?

Thanks for your time.

Regards,
Erwin Moller

-- 
"That which can be asserted without evidence, can be dismissed without 
evidence."
-- Christopher Hitchens

[toc] | [next] | [standalone]

#16177

Am 2012-09-27 09:55, Erwin Moller meinte:
 > Hi clj,
 >
 > Please consider the following 2 examples:
 >
 > Example1: (works as intended)
 > =========================================================
 > <span class="ahrefmimic"
 >   onClick="var curStyle =
 >     document.getElementById('techdiv').style;
 >     curStyle.display=((curStyle.display=='block')?'none':'block');
 > ">on/off</span>
 > <div id="techdiv" style="display:none;">
 > ....
 > </div>
 > =========================================================
 >
 >
 > Example2: (Doesn't work as intended, but no errors)
 > =========================================================
 > <span class="ahrefmimic"
 >   onClick="var curStyleDisp =
 >     document.getElementById('techdiv').style.display;
 >     curStyleDisp=((curStyleDisp=='block')?'none':'block');
 > ">on/off</span>
 > <div id="techdiv" style="display:none;">
 > ....
 > </div>
 > =========================================================
 >
 >
 > Example 1 works as (I) intended: It makes div techdiv appear and
 > disappear when clicking on 'on/off'.
 > The second example doesn't do anything (no error message either).
 >

The first one establishes a reference to your style object (I'm sure I 
got my wording wrong - Thomas will correct that :-) ) and you access and 
set a property of this object.

In the latter case you assign a string value to a variable and overwrite 
this value depending on its previous value. There is no longer a 
reference to your style object established.

 > In example2, am I just changing the value of a String that has no
 > connection to the original style.display property?

Yes. How should it?

Gregor

[toc] | [prev] | [next] | [standalone]

#16178

On 9/27/2012 10:08 AM, Gregor Kofler wrote:
> Am 2012-09-27 09:55, Erwin Moller meinte:
>  > Hi clj,
>  >
>  > Please consider the following 2 examples:
>  >
>  > Example1: (works as intended)
>  > =========================================================
>  > <span class="ahrefmimic"
>  >   onClick="var curStyle =
>  >     document.getElementById('techdiv').style;
>  >     curStyle.display=((curStyle.display=='block')?'none':'block');
>  > ">on/off</span>
>  > <div id="techdiv" style="display:none;">
>  > ....
>  > </div>
>  > =========================================================
>  >
>  >
>  > Example2: (Doesn't work as intended, but no errors)
>  > =========================================================
>  > <span class="ahrefmimic"
>  >   onClick="var curStyleDisp =
>  >     document.getElementById('techdiv').style.display;
>  >     curStyleDisp=((curStyleDisp=='block')?'none':'block');
>  > ">on/off</span>
>  > <div id="techdiv" style="display:none;">
>  > ....
>  > </div>
>  > =========================================================
>  >
>  >
>  > Example 1 works as (I) intended: It makes div techdiv appear and
>  > disappear when clicking on 'on/off'.
>  > The second example doesn't do anything (no error message either).
>  >
>
> The first one establishes a reference to your style object (I'm sure I
> got my wording wrong - Thomas will correct that :-) ) and you access and
> set a property of this object.
>
> In the latter case you assign a string value to a variable and overwrite
> this value depending on its previous value. There is no longer a
> reference to your style object established.


Thanks.

And just to make sure I understand it alright:
Is the following explanation correct?

var el = document.getElementById("whatever");

--> el.style.display returns a string, which is a primitive type.
--> el.style returns a reference to an object.

And is it correct to state that:
var myvar = el.style.display;
will create a *new string*, and assigns that to myvar, only using 
el.style.display to produce the value from some internal interpretation 
in the browsers DOM?


>
>  > In example2, am I just changing the value of a String that has no
>  > connection to the original style.display property?
>
> Yes. How should it?

I am working on that above. ;-)

>
> Gregor
>

Regards,
Erwin Moller


-- 
"That which can be asserted without evidence, can be dismissed without 
evidence."
-- Christopher Hitchens

[toc] | [prev] | [next] | [standalone]

#16183

Am 2012-09-27 10:25, Erwin Moller meinte:

> And just to make sure I understand it alright:
> Is the following explanation correct?
>
> var el = document.getElementById("whatever");
>
> --> el.style.display returns a string, which is a primitive type.
> --> el.style returns a reference to an object.
>
> And is it correct to state that:
> var myvar = el.style.display;
> will create a *new string*, and assigns that to myvar, only using
> el.style.display to produce the value from some internal interpretation
> in the browsers DOM?

The right part of the assignment operator is evaluated, this result of 
this evaluation is assigned to the left part - I suppose it depends on 
the ES implementation whether a temporary "new string" is created.

Gregor

[toc] | [prev] | [next] | [standalone]

#16184

Erwin Moller wrote:

>>  > In example2, am I just changing the value of a String that has no
>>  > connection to the original style.display property?
>>
>> Yes. How should it?
>
> I am working on that above. ;-)


You could use the "with" statement: http://jsfiddle.net/zZ5Eq/.

Note however that "with" has been deprecated for a long time 
(https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/with) 
and is forbidden in strict mode in ECMAScript 5 implementations.

So your initial example that stores the element's style object is the 
right approach.


-- 

	Martin Honnen --- MVP Data Platform Development
	http://msmvps.com/blogs/martin_honnen/

[toc] | [prev] | [next] | [standalone]

#16185 — Reference basics (Was: Question about reference to style properties)

On 9/27/2012 2:01 PM, Martin Honnen wrote:
> Erwin Moller wrote:
>
>>>  > In example2, am I just changing the value of a String that has no
>>>  > connection to the original style.display property?
>>>
>>> Yes. How should it?
>>
>> I am working on that above. ;-)
>
>
> You could use the "with" statement: http://jsfiddle.net/zZ5Eq/.
>
> Note however that "with" has been deprecated for a long time
> (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/with)
> and is forbidden in strict mode in ECMAScript 5 implementations.
>
> So your initial example that stores the element's style object is the
> right approach.
>
>


Thank you.
I have been catching up by reading some more.

My problem is that I have a mental image of a C-style pointer to the 
value of el.style.display, which was used by both my variable and 
el.style.display.
(el being some element)

WRONG:
   el.style.display holds a pointer to X
   var pMyX = el.style.display;
   Now pMyX also holds a pointer to X.
Which it incorrect.

CORRECT:
   var ed = el.style.display;
Now ed holds a copy of whatever was found in el.style.display.
(A String in this case). Hence modifying that copy will not affect the 
el.style.display, where it was copied from.

Does that make sense?


What confuses me a lot is that:
var es = el.style;
now es holds a reference to el.style;

while

var ed = el.style.display;
now ed does NOT hold a reference to el.style.display;

Is the reason for that that the former is an Object and the later is a 
primitive type?


Thanks for your time.

Regards,
Erwin Moller

-- 
"That which can be asserted without evidence, can be dismissed without 
evidence."
-- Christopher Hitchens

[toc] | [prev] | [next] | [standalone]

#16186 — Re: Reference basics (Was: Question about reference to style properties)

Erwin Moller wrote:

> My problem is that I have a mental image of a C-style pointer to the
> value of el.style.display, which was used by both my variable and
> el.style.display.
> (el being some element)
>
> WRONG:
>    el.style.display holds a pointer to X
>    var pMyX = el.style.display;
>    Now pMyX also holds a pointer to X.
> Which it incorrect.
>
> CORRECT:
>    var ed = el.style.display;
> Now ed holds a copy of whatever was found in el.style.display.
> (A String in this case). Hence modifying that copy will not affect the
> el.style.display, where it was copied from.
>
> Does that make sense?

I don't feel qualified to compare Javascript with C (in particular not C 
pointers) but even with C if you have
   int n1 = 1;
   int n2 = n1;
   n2 = 2;
you don't expect n1 to be changed when n2 is assigned to, do you?
el.style.display is of type string which is a primitive type, a value 
type in Javascript, as much as int is in C.




> What confuses me a lot is that:
> var es = el.style;
> now es holds a reference to el.style;
>
> while
>
> var ed = el.style.display;
> now ed does NOT hold a reference to el.style.display;
>
> Is the reason for that that the former is an Object and the later is a
> primitive type?

Yes, el.style is an object, el.style.display is a primitive value.

-- 

	Martin Honnen --- MVP Data Platform Development
	http://msmvps.com/blogs/martin_honnen/

[toc] | [prev] | [next] | [standalone]

#16187 — Re: Reference basics (Was: Question about reference to style properties)

Am 2012-09-27 14:46, Erwin Moller meinte:

> What confuses me a lot is that:
> var es = el.style;
> now es holds a reference to el.style;
>
> while
>
> var ed = el.style.display;
> now ed does NOT hold a reference to el.style.display;
>
> Is the reason for that that the former is an Object and the later is a
> primitive type?

Yes. With objects only the object reference is "cloned" and assigned to 
the variable.

Gregor

[toc] | [prev] | [next] | [standalone]

#16188 — Re: Reference basics (Was: Question about reference to style properties)

Erwin Moller wrote:

> What confuses me a lot is that:
>
>     var es = el.style;
>
> now es holds a reference to el.style;
>
> while
>
>     var ed = el.style.display;
>
> now ed does NOT hold a reference to el.style.display;
>
> Is the reason for that that the former is an Object and the later is a
> primitive type?

I'm going to disagree slightly with Martin and Gregor here.  `es` is a
*reference* to an object, a *copy* of the reference that was stored in
`el.style`.  Variables are copied and passed by value, including those
values which happen to be references to objects.  So just as `ed` is a
copy of the string in `el.style.display`, `es` is a copy of the object
reference in `el.style`.  It's a somewhat subtle point, but fairly
important.

  -- Scott

[toc] | [prev] | [next] | [standalone]

#16189 — Re: Reference basics (Was: Question about reference to style properties)

Scott Sauyet wrote:
> Erwin Moller wrote:
> I'm going to disagree slightly with Martin and Gregor here.  `es` is a
> *reference* to an object, a *copy* of the reference that was stored in
> `el.style`.  Variables are copied and passed by value, including those
> values which happen to be references to objects.  So just as `ed` is a
> copy of the string in `el.style.display`, `es` is a copy of the object
> reference in `el.style`.  It's a somewhat subtle point, but fairly
> important.

I guess this really isn't disagreement with Gregor, only with his
"Yes".

   -- Scott

[toc] | [prev] | [next] | [standalone]

#16294 — Re: Reference basics (Was: Question about reference to style properties)

On 9/27/2012 3:35 PM, Scott Sauyet wrote:
> Erwin Moller wrote:
>
>> What confuses me a lot is that:
>>
>>      var es = el.style;
>>
>> now es holds a reference to el.style;
>>
>> while
>>
>>      var ed = el.style.display;
>>
>> now ed does NOT hold a reference to el.style.display;
>>
>> Is the reason for that that the former is an Object and the later is a
>> primitive type?
>
> I'm going to disagree slightly with Martin and Gregor here.  `es` is a
> *reference* to an object, a *copy* of the reference that was stored in
> `el.style`.  Variables are copied and passed by value, including those
> values which happen to be references to objects.  So just as `ed` is a
> copy of the string in `el.style.display`, `es` is a copy of the object
> reference in `el.style`.  It's a somewhat subtle point, but fairly
> important.

Clear addition.
Thanks.
So because I create a new variable (es or ed), I make a copy of the 
original (passed by value).

es = el.style
es is now a *copy* of the reference to the style Object of el.
(both es and el.style point to the same Object)

ed = el.style.display
ed is a string because el.style.display holds a string.
The string is copied when the ed variable is created.

Thanks for the input, Scott.

Regards,
Erwin Moller


>
>    -- Scott
>


-- 
"That which can be asserted without evidence, can be dismissed without 
evidence."
-- Christopher Hitchens

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web