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

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

Changing styles values by Element Name

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

Contents

  Changing styles values by Element Name Scott Johnson <noonehome@chalupasworld.com> - 2012-06-03 06:46 -0700
    Re: Changing styles values by Element Name Martin Honnen <mahotrash@yahoo.de> - 2012-06-03 15:53 +0200
      Re: Changing styles values by Element Name "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-06-03 15:44 +0000
        Re: Changing styles values by Element Name Scott Johnson <noonehome@chalupasworld.com> - 2012-06-03 09:06 -0700
        Re: Changing styles values by Element Name Scott Johnson <noonehome@chalupasworld.com> - 2012-06-03 09:22 -0700
          Re: Changing styles values by Element Name Jeremy J Starcher <r3jjs@yahoo.com> - 2012-06-05 20:26 +0000
            Re: Changing styles values by Element Name Scott Johnson <noonehome@chalupasworld.com> - 2012-06-05 20:52 -0700
              Re: Changing styles values by Element Name "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-06-06 09:57 +0000
                Re: Changing styles values by Element Name Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-06-09 11:43 +0200
                  Re: Changing styles values by Element Name Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-06-09 13:03 +0200
                  Re: Changing styles values by Element Name "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-06-09 14:14 +0000
                    Re: Changing styles values by Element Name Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-06-09 18:13 +0200
                      Re: Changing styles values by Element Name Luuk <luuk@invalid.lan> - 2012-06-09 18:35 +0200
                      Re: Changing styles values by Element Name "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-06-10 10:33 +0000
                        Re: Changing styles values by Element Name Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-06-10 14:50 +0200
    Re: Changing styles values by Element Name SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-06-04 15:32 +0200

#14300 — Changing styles values by Element Name

Is it possible to change a batch of elements style values by using those 
elements name.

Here is my situation.


I have several colors swatch images (sample)

<img id='color1::mens::size40' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color2::mens::size40' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color3::mens::size40' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color4::mens::size40' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color1::mens::size42' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color2::mens::size42' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color3::mens::size42' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color4::mens::size42' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color1::womens::size40' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color2::womens::size40' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color3::womens::size40' name='color_swatch' src='...' 
onclick='select(this)'/>
<img id='color4::womens::size40' name='color_swatch' src='...' 
onclick='select(this)'/>

What I would like to do is when one is clicked on it will place a border 
on it.

This I have been able to do:

function select(oElement) {
	oElement.style.border = "3px solid red";
}

However the issue I run into is clearing the border when another one is 
selected.

Since all the ids have numerous values I tried to use a common name and 
then clear all the borders before setting one.

function select(oElement) {

  document.getElementsByName('color_swatch').style.border = "1px solid 
gray";
  oElement.style.border = "3px solid red";
}

This is barfing on setting the 'name' style.

Maybe I am coming at this in the wrong direction, I am conceding to the 
knowledge of those who have been doing this for awhile.

Thanks
Scotty

[toc] | [next] | [standalone]

#14301

Scott Johnson wrote:

> function select(oElement) {
>
> document.getElementsByName('color_swatch').style.border = "1px solid gray";
> oElement.style.border = "3px solid red";
> }
>
> This is barfing on setting the 'name' style.

You need to loop e.g.
   for (var imgs = document.images.color_swatch, l = imgs.length; i < l; 
i++) {
     imgs[i].style.border = "1px solid gray";
   }
(respectively with getElementsByName
   for (var imgs = document.getElementsByName("color_swatch"), l = 
imgs.length; i < l; i++) {
     imgs[i].style.border = "1px solid gray";
   }

-- 

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

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

#14302

Martin Honnen wrote on 03 jun 2012 in comp.lang.javascript:

> Scott Johnson wrote:
> 
>> function select(oElement) {
>>
>> document.getElementsByName('color_swatch').style.border = "1px solid
>> gray"; oElement.style.border = "3px solid red";
>> }
>>
>> This is barfing on setting the 'name' style.
> 
> You need to loop e.g.
>    for (var imgs = document.images.color_swatch, l = imgs.length; i <
>    l; 
> i++) {
>      imgs[i].style.border = "1px solid gray";
>    }
> (respectively with getElementsByName
>    for (var imgs = document.getElementsByName("color_swatch"), l = 
> imgs.length; i < l; i++) {
>      imgs[i].style.border = "1px solid gray";
>    }
> 


Better just replace the borderColor with "transparent",
keeping the layout [bordersize] the same.

[css]
myImgs {border:3px solid transparent;}

[js]
var imgs = document.getElementsByName('color_swatch');
var l = --imgs.length;

function select(im) {
   for (i=l, i<0; i--)
      imgs[i].style.borderColor = "transparent";
   im.style.borderColor = "red";
};


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#14304

On 6/3/2012 8:44 AM, Evertjan. wrote:
> Martin Honnen wrote on 03 jun 2012 in comp.lang.javascript:
>
>> Scott Johnson wrote:
>>
>>> function select(oElement) {
>>>
>>> document.getElementsByName('color_swatch').style.border = "1px solid
>>> gray"; oElement.style.border = "3px solid red";
>>> }
>>>
>>> This is barfing on setting the 'name' style.
>>
>> You need to loop e.g.
>>     for (var imgs = document.images.color_swatch, l = imgs.length; i<
>>     l;
>> i++) {
>>       imgs[i].style.border = "1px solid gray";
>>     }
>> (respectively with getElementsByName
>>     for (var imgs = document.getElementsByName("color_swatch"), l =
>> imgs.length; i<  l; i++) {
>>       imgs[i].style.border = "1px solid gray";
>>     }
>>
>
>
> Better just replace the borderColor with "transparent",
> keeping the layout [bordersize] the same.
>
> [css]
> myImgs {border:3px solid transparent;}
>
> [js]
> var imgs = document.getElementsByName('color_swatch');
> var l = --imgs.length;
>
> function select(im) {
>     for (i=l, i<0; i--)
>        imgs[i].style.borderColor = "transparent";
>     im.style.borderColor = "red";
> };
>
>

Thanks for the quick reply.
You all are good!

Scotty

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

#14307

On 6/3/2012 8:44 AM, Evertjan. wrote:
> Martin Honnen wrote on 03 jun 2012 in comp.lang.javascript:
>
>> Scott Johnson wrote:
>>
>>> function select(oElement) {
>>>
>>> document.getElementsByName('color_swatch').style.border = "1px solid
>>> gray"; oElement.style.border = "3px solid red";
>>> }
>>>
>>> This is barfing on setting the 'name' style.
>>
>> You need to loop e.g.
>>     for (var imgs = document.images.color_swatch, l = imgs.length; i<
>>     l;
>> i++) {
>>       imgs[i].style.border = "1px solid gray";
>>     }
>> (respectively with getElementsByName
>>     for (var imgs = document.getElementsByName("color_swatch"), l =
>> imgs.length; i<  l; i++) {
>>       imgs[i].style.border = "1px solid gray";
>>     }
>>
>
>
> Better just replace the borderColor with "transparent",
> keeping the layout [bordersize] the same.
>
> [css]
> myImgs {border:3px solid transparent;}
>
> [js]
> var imgs = document.getElementsByName('color_swatch');
> var l = --imgs.length;
>
> function select(im) {
>     for (i=l, i<0; i--)
>        imgs[i].style.borderColor = "transparent";
>     im.style.borderColor = "red";
> };
>
>

Ahhh now I see.

getElementsByName returns an array of (duh) elements.
I guess the (s) should of clued me in.

Thanks again Martin and Evertjan

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

#14341

On Sun, 03 Jun 2012 09:22:18 -0700, Scott Johnson wrote:

> On 6/3/2012 8:44 AM, Evertjan. wrote:
>> Martin Honnen wrote on 03 jun 2012 in comp.lang.javascript:
> Ahhh now I see.
> 
> getElementsByName returns an array of (duh) elements. I guess the (s)
> should of clued me in.

Actually, it returns at HTMLCollection which is array-like.  The 
difference may seem subtle, but confusing the two can cause bugs or 
runtime errors.

https://developer.mozilla.org/en/DOM/HTMLCollection

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

#14347

On 6/5/2012 1:26 PM, Jeremy J Starcher wrote:
> On Sun, 03 Jun 2012 09:22:18 -0700, Scott Johnson wrote:
>
>> On 6/3/2012 8:44 AM, Evertjan. wrote:
>>> Martin Honnen wrote on 03 jun 2012 in comp.lang.javascript:
>> Ahhh now I see.
>>
>> getElementsByName returns an array of (duh) elements. I guess the (s)
>> should of clued me in.
>
> Actually, it returns at HTMLCollection which is array-like.  The
> difference may seem subtle, but confusing the two can cause bugs or
> runtime errors.
>
> https://developer.mozilla.org/en/DOM/HTMLCollection
>

Thanks for the extra info and link.  Valuable info.

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

#14354

Scott Johnson wrote on 06 jun 2012 in comp.lang.javascript:

> On 6/5/2012 1:26 PM, Jeremy J Starcher wrote:
>> On Sun, 03 Jun 2012 09:22:18 -0700, Scott Johnson wrote:
>>
>>> On 6/3/2012 8:44 AM, Evertjan. wrote:
>>>> Martin Honnen wrote on 03 jun 2012 in comp.lang.javascript:
>>> Ahhh now I see.
>>>
>>> getElementsByName returns an array of (duh) elements. I guess the (s)
>>> should of clued me in.
>>
>> Actually, it returns at HTMLCollection which is array-like.  The
>> difference may seem subtle, but confusing the two can cause bugs or
>> runtime errors.
>>
>> https://developer.mozilla.org/en/DOM/HTMLCollection
>>
> 
> Thanks for the extra info and link.  Valuable info.

All js-variables are valuable, even with "undefined".

All[?] DOM collections can be actively used in JS, 
except the garbage collection. 


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#14418

Evertjan. wrote:

> Scott Johnson wrote on 06 jun 2012 in comp.lang.javascript:
>> On 6/5/2012 1:26 PM, Jeremy J Starcher wrote:
>>> On Sun, 03 Jun 2012 09:22:18 -0700, Scott Johnson wrote:
>>>> On 6/3/2012 8:44 AM, Evertjan. wrote:
>>>>> Martin Honnen wrote on 03 jun 2012 in comp.lang.javascript:
>>>> Ahhh now I see.
>>>>
>>>> getElementsByName returns an array of (duh) elements. I guess the (s)
>>>> should of clued me in.
>>>
>>> Actually, it returns at HTMLCollection which is array-like.  The
>>> difference may seem subtle, but confusing the two can cause bugs or
>>> runtime errors.
>>>
>>> https://developer.mozilla.org/en/DOM/HTMLCollection
>> 
>> Thanks for the extra info and link.  Valuable info.
> 
> All js-variables are valuable, even with "undefined".

You misunderstand.  Scott thanked Jeremy for the information he provided to 
him – that getElementsByName() only returns a (reference to) an array-*like* 
object which implements the HTMLCollection interface.  He considered that 
information valuable.

However actually, the method is *specified* to return a reference to an 
object implementing the *NodeList* interface instead:

[1] <http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259>
[2] <http://www.whatwg.org/specs/web-apps/current-
work/multipage/dom.html#dom-document-getelementsbyname>

It is a specialty of the Gecko DOM that the referred object also implements 
the HTMLCollection interface:

<https://developer.mozilla.org/en/DOM/document.getElementsByName>
(refers to both the specifications above)

This can be proven by showing that in Iceweasel (Firefox) 10.0.5 the 
referred object inherits a namedItem() method, which is native to 
HTMLCollection and HTMLOptionsCollection implementations only [1].

I do not understand to what end that is in the Gecko DOM, as the namedItem() 
method of the referred object, when called with the name as argument can 
reasonably at most only return the same value that the item() method returns 
when called with argument 0 (to yield the first item of the NodeList) [1].

> All[?] DOM collections can be actively used in JS,

No, it depends on the runtime environment of the ECMAScript implementation 
that provides the DOM implementation whether and which DOM collections can 
be used.

> except the garbage collection.

You are not making sense.  Garbage collection is a functionality of the 
ECMAScript implementation; it is not a DOM collection.


PointedEars
-- 
var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
)  // Plone, register_function.js:16

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

#14419

Thomas 'PointedEars' Lahn wrote:

> Evertjan. wrote:
>> All[?] DOM collections can be actively used in JS,
> 
> No, it depends on the runtime environment of the ECMAScript implementation
                                                                            ^
> that provides the DOM implementation whether and which DOM collections can
> be used.

In order not to be misunderstood: There should be commas, so it should read

"… it depends on <<the runtime environment> of <the ECMAScript 
implementation>>, <that provides the DOM implementation>, …".

IOW: The DOM implementation is provided by the runtime environment, not by 
the ECMAScript implementation.


PointedEars
-- 
Sometimes, what you learn is wrong. If those wrong ideas are close to the 
root of the knowledge tree you build on a particular subject, pruning the 
bad branches can sometimes cause the whole tree to collapse.
  -- Mike Duffy in cljs, <news:Xns9FB6521286DB8invalidcom@94.75.214.39>

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

#14420

Thomas 'PointedEars' Lahn wrote on 09 jun 2012 in comp.lang.javascript:

>> All js-variables are valuable, even with "undefined".
> 
> You misunderstand. 

That is a typical projection of your lack of understanding.

The valuability of a variable is the essense of a variable.

An invaluable variable would better be called a constant.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#14423

Evertjan. wrote:

> Thomas 'PointedEars' Lahn wrote on 09 jun 2012 in comp.lang.javascript:
>>> All js-variables are valuable, even with "undefined".
>> You misunderstand.

This sentence refers to a lot more than just the sentence above it.

> That is a typical projection of your lack of understanding.
> 
> The valuability of a variable is the essense of a variable.
> 
> An invaluable variable would better be called a constant.

Either your understanding of English leaves a lot to be desired, or you are 
trolling.  (The different way of forging of your From header value which 
caused your postings to be be visible here again would indicate the latter.)

Variables were _not_ subject here, but the information given from one poster 
(Jeremy) to one reader (Scott).


PointedEars
-- 
Sometimes, what you learn is wrong. If those wrong ideas are close to the 
root of the knowledge tree you build on a particular subject, pruning the 
bad branches can sometimes cause the whole tree to collapse.
  -- Mike Duffy in cljs, <news:Xns9FB6521286DB8invalidcom@94.75.214.39>

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

#14424

On 09-06-2012 18:13, Thomas 'PointedEars' Lahn wrote:
> The different way of forging of your From header value which 
> caused your postings to be be visible here again would indicate the latter.

Some people do not change this,
I should take more advantage of that situation.

;)


-- 
Luuk

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

#14429

Thomas 'PointedEars' Lahn wrote on 09 jun 2012 in comp.lang.javascript:

> Evertjan. wrote:
> 
>> Thomas 'PointedEars' Lahn wrote on 09 jun 2012 in
>> comp.lang.javascript: 
>>>> All js-variables are valuable, even with "undefined".
>>> You misunderstand.
> 
> This sentence refers to a lot more than just the sentence above it.
> 
>> That is a typical projection of your lack of understanding.
>> 
>> The valuability of a variable is the essense of a variable.
>> 
>> An invaluable variable would better be called a constant.
> 
> Either your understanding of English leaves a lot to be desired, or
> you are trolling.  (The different way of forging of your From header
> value which caused your postings to be be visible here again would
> indicate the latter.) 
> 
> Variables were _not_ subject here, but the information given from one
> poster (Jeremy) to one reader (Scott).

No, there is no private channel on usenet NGs.

So anything that is posted commenting on what is said, 
and not on subject in your eyes is worth a "You misunderstand"?

Why should it be important what you desire of my understanding of English?

I usually back you up on your impressive knowledge of Javascript,
however that does not imply you are an expert on English, 
the latter being off-topic here, by the way.  

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#14430

Evertjan. wrote:

> Thomas 'PointedEars' Lahn wrote on 09 jun 2012 in comp.lang.javascript:
>> Evertjan. wrote:
>>> Thomas 'PointedEars' Lahn wrote on 09 jun 2012 in
>>> comp.lang.javascript:
>>>>> All js-variables are valuable, even with "undefined".
>>>> You misunderstand.
>> 
>> This sentence refers to a lot more than just the sentence above it.

Did you even get my meaning here?
 
>>> That is a typical projection of your lack of understanding.
>>> 
>>> The valuability of a variable is the essense of a variable.
>>> 
>>> An invaluable variable would better be called a constant.
>> 
>> Either your understanding of English leaves a lot to be desired, or
>> you are trolling.  (The different way of forging of your From header
>> value which caused your postings to be be visible here again would
>> indicate the latter.)
>> 
>> Variables were _not_ subject here, but the information given from one
>> poster (Jeremy) to one reader (Scott).
> 
> No, there is no private channel on usenet NGs.

Nobody said there was.
 
> So anything that is posted commenting on what is said,
> and not on subject in your eyes is worth a "You misunderstand"?

You have *evidentially* misunderstood, and you are still *evidentially* 
misunderstanding what was posted by Scott in his reply to Jeremy's posting.
 
> Why should it be important what you desire of my understanding of English?

Because if you had at least a fair grasp of English, a discussion with you 
in English could turn out to be so much more useful to everyone.

> I usually back you up on your impressive knowledge of Javascript,
> however that does not imply you are an expert on English,
> the latter being off-topic here, by the way.

At least *I* can understand English when I read it.  You either evidentially 
cannot, or you are trolling.  Take your pick.


EOD

PointedEars
-- 
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
  -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)

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

#14322

Le 03/06/12 15:46, Scott Johnson a écrit :
> Is it possible to change a batch of elements style values by using those
> elements name.
>
> Here is my situation.
>
>
> I have several colors swatch images (sample)
>
> <img id='color1::mens::size40' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color2::mens::size40' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color3::mens::size40' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color4::mens::size40' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color1::mens::size42' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color2::mens::size42' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color3::mens::size42' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color4::mens::size42' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color1::womens::size40' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color2::womens::size40' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color3::womens::size40' name='color_swatch' src='...'
> onclick='select(this)'/>
> <img id='color4::womens::size40' name='color_swatch' src='...'
> onclick='select(this)'/>
>
> What I would like to do is when one is clicked on it will place a border
> on it.

function toggleImg() {
  var s = this.style.border;
  this.style.border = s==''? '3px solid red' : '';
  }
var I = document.images, n = I.length;
window.onload = function() {
   while(n--) I[n].onclick = toggleImg;
   }

variante :

window.onload = function() {
   while(n--) if(I[n].name=='color_swatch') I[n].onclick = toggleImg;
   }

> However the issue I run into is clearing the border when another one is
> selected.
>
> Since all the ids have numerous values I tried to use a common name and
> then clear all the borders before setting one.

Yeap !

function clickImg() {
  var I = document.images, n = I.length;
  if(n) while(n--) I[n].style.border = '';
  this.style.border = '3px solid red';
  }
window.onload = function() {
   var I = document.images, n = I.length;
   if(n)
   while(n--) if(I[n].name=='color_swatch') I[n].onclick = clickImg;
   I = n = null;
   }



-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [standalone]

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

csiph-web