Connecting Tech Pros Worldwide Help | Site Map

How do i getElementById("a") and add a class to it, using JavaScript,halfway there?

SM
Guest
 
Posts: n/a
#1: Jun 27 '08
Hello, i need to add a classname to an element <ausing JavaScript.
I've tried a couple of thing with no success.


This is an small piece of my code:
....
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 2</a></li>
....

<img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>


function show_picture(picture) {
var source = picture.getAttribute("href");
var cover = document.getElementById("cover");

cover.setAttribute("src", source);

//??????doesnt work
var el_a = document.getElementById("a");
el_a.className = "here";
}

Any ideas?

Thanks
Marco
Gregor Kofler
Guest
 
Posts: n/a
#2: Jun 27 '08

re: How do i getElementById("a") and add a class to it, using JavaScript,halfway there?


SM meinte:
Quote:
Hello, i need to add a classname to an element <ausing JavaScript.
I've tried a couple of thing with no success.
>
>
This is an small piece of my code:
...
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 2</a></li>
...
>
<img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
>
>
function show_picture(picture) {
var source = picture.getAttribute("href");
var cover = document.getElementById("cover");
>
cover.setAttribute("src", source);
>
//??????doesnt work
var el_a = document.getElementById("a");
el_a.className = "here";
}
As expected. Use other methods to get element references, like
getElementsByTagName() (returns a collection of elements with a given
name), or give your element a name or id and access it with
getElementById() or getElementsByName().

Gregor


--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
sheldonlg
Guest
 
Posts: n/a
#3: Jun 27 '08

re: How do i getElementById("a") and add a class to it, using JavaScript,halfway there?


Gregor Kofler wrote:
Quote:
SM meinte:
Quote:
>Hello, i need to add a classname to an element <ausing JavaScript.
>I've tried a couple of thing with no success.
>>
>>
>This is an small piece of my code:
>...
><li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
>return false;">image 1</a></li>
><li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
>return false;">image 2</a></li>
>...
>>
><img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
>>
>>
>function show_picture(picture) {
>var source = picture.getAttribute("href");
>var cover = document.getElementById("cover");
>>
>cover.setAttribute("src", source);
>>
>//??????doesnt work
>var el_a = document.getElementById("a");
>el_a.className = "here";
>}
>
As expected. Use other methods to get element references, like
getElementsByTagName() (returns a collection of elements with a given
name), or give your element a name or id and access it with
getElementById() or getElementsByName().
>
Gregor
>
>
Expanding upon what you said:

He did that for cover:

<img id="cover" src="<?php echo $cd_cover; ?>" alt="" />
var cover = document.getElementById("cover");
cover.setAttribute("src", source);

But he didn't have an element id="a" for the

var el_a = document.getElementById("a");
SM
Guest
 
Posts: n/a
#4: Jun 27 '08

re: How do i getElementById("a") and add a class to it, using JavaScript,halfway there?


On May 28, 5:20 pm, Gregor Kofler <use...@gregorkofler.atwrote:
Quote:
SM meinte:
>
>
>
Quote:
Hello, i need to add a classname to an element <ausing JavaScript.
I've tried a couple of thing with no success.
>
Quote:
This is an small piece of my code:
...
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 2</a></li>
...
>
Quote:
<img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
>
Quote:
function show_picture(picture) {
var source = picture.getAttribute("href");
var cover = document.getElementById("cover");
>
Quote:
cover.setAttribute("src", source);
>
Quote:
//??????doesnt work
var el_a = document.getElementById("a");
el_a.className = "here";
}
>
As expected. Use other methods to get element references, like
getElementsByTagName() (returns a collection of elements with a given
name), or give your element a name or id and access it with
getElementById() or getElementsByName().
>
Gregor
>
--http://photo.gregorkofler.at::: Landschafts- und Reisefotografiehttp://web.gregorkofler.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum
getElementByTagName doesn't work for me. getElementById does work ok.
I can't imagine having 30+ <aand give an 'id' tag for each. That's
just BAD programing in my opinion.
That's why i was looking for a general rule. Since i'm passing 'this'
in the function as a parameter, i was wondering if i could get the
parent or something similar and then add a class name. But then again,
i will need a way to undo that classname when i select another <a>.

I did more research and came up with this:

<ul id="nav_cd_imgs">
...
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 2</a></li>
...
</ul>


var els_a =
document.getElementById("nav_cd_imgs").getElements ByTagName("a").length;

//testing purposes
alert(els_a);

//switch off all className in all <a>
for (i=0; i<els_a; i++) {
?????
}

//switch on the <aselected with a className
????


I just need to find how to get the <aselected. Any hints, meanwhile,
i'll continue searching the web and post the answer here if i find
something.


Thanks
Marco
Gregor Kofler
Guest
 
Posts: n/a
#5: Jun 27 '08

re: How do i getElementById("a") and add a class to it, using JavaScript,halfway there?


SM meinte:
Quote:
Quote:
>--http://photo.gregorkofler.at::: Landschafts- und Reisefotografiehttp://web.gregorkofler.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum
Please, don't quote signatures.
Quote:
getElementByTagName doesn't work for me.
It is getElement*s*ByTagName()
Quote:
getElementById does work ok.
I can't imagine having 30+ <aand give an 'id' tag for each. That's
just BAD programing in my opinion.
What do you expect? How would your original approach have distinguished
between the different anchor-elements?
Quote:
That's why i was looking for a general rule. Since i'm passing 'this'
in the function as a parameter, i was wondering if i could get the
parent or something similar and then add a class name. But then again,
i will need a way to undo that classname when i select another <a>.
Quote:
I did more research and came up with this:
>
<ul id="nav_cd_imgs">
...
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 2</a></li>
...
</ul>
Untested:

function show_picture(clicked_a) {
Quote:
>
var els_a =
document.getElementById("nav_cd_imgs").getElements ByTagName("a").length;
var els_a =
document.getElementById("nav_cd_imgs").getElements ByTagName("a");
Quote:
//testing purposes
alert(els_a);
>
//switch off all className in all <a>
for (i=0; i<els_a; i++) {
for(var i = els_a.length; i--;) {
if(els_a[i].className == "foo") {
els_a[i].className = "bar";
}
if(els_a[i] == clicked_a) {
els_a[i].className = "foo";
}
}


Gregor


--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
SM
Guest
 
Posts: n/a
#6: Jun 27 '08

re: How do i getElementById("a") and add a class to it, using JavaScript,halfway there?


On May 28, 6:39 pm, Gregor Kofler <use...@gregorkofler.atwrote:
Quote:
SM meinte:
>
Quote:
Quote:
--http://photo.gregorkofler.at:::Landschafts- und Reisefotografiehttp://web.gregorkofler.com::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum
>
Please, don't quote signatures.
>
Quote:
getElementByTagName doesn't work for me.
>
It is getElement*s*ByTagName()
>
Quote:
getElementById does work ok.
I can't imagine having 30+ <aand give an 'id' tag for each. That's
just BAD programing in my opinion.
>
What do you expect? How would your original approach have distinguished
between the different anchor-elements?
>
Quote:
That's why i was looking for a general rule. Since i'm passing 'this'
in the function as a parameter, i was wondering if i could get the
parent or something similar and then add a class name. But then again,
i will need a way to undo that classname when i select another <a>.
I did more research and came up with this:
>
Quote:
<ul id="nav_cd_imgs">
...
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
return false;">image 2</a></li>
...
</ul>
>
Untested:
>
function show_picture(clicked_a) {
>
>
>
Quote:
var els_a =
document.getElementById("nav_cd_imgs").getElements ByTagName("a").length;
>
var els_a =
document.getElementById("nav_cd_imgs").getElements ByTagName("a");
>
Quote:
//testing purposes
alert(els_a);
>
Quote:
//switch off all className in all <a>
for (i=0; i<els_a; i++) {
>
for(var i = els_a.length; i--;) {
if(els_a[i].className == "foo") {
els_a[i].className = "bar";
}
if(els_a[i] == clicked_a) {
els_a[i].className = "foo";
}
Gregor,
Awesome! I've try it and it works perfectly! Many thanks.
My mistake, i didn't not explain correctly what i was searching for.
At the end, it all work out for the best!

Thanks again
Marco
Thomas 'PointedEars' Lahn
Guest
 
Posts: n/a
#7: Jun 27 '08

re: How do i getElementById("a") and add a class to it, using JavaScript,halfway there?


Gregor Kofler wrote:
Quote:
SM meinte:
Quote:
>Hello, i need to add a classname to an element <ausing JavaScript.
>I've tried a couple of thing with no success.
>[...]
>//??????doesnt work
>var el_a = document.getElementById("a");
>el_a.className = "here";
>}
>
As expected. Use other methods to get element references, like
getElementsByTagName() (returns a collection of elements with a given
name), [...]
A given *tag* name, or better: element type.
Quote:
getElementById() or getElementsByName().
Yes, *these* are about element's IDs and names.


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
Gregor Kofler
Guest
 
Posts: n/a
#8: Jun 27 '08

re: How do i getElementById("a") and add a class to it, using JavaScript,halfway there?


Thomas 'PointedEars' Lahn meinte:
Quote:
Gregor Kofler wrote:
Quote:
>SM meinte:
Quote:
>>Hello, i need to add a classname to an element <ausing JavaScript.
>>I've tried a couple of thing with no success.
>>[...]
>>//??????doesnt work
>>var el_a = document.getElementById("a");
>>el_a.className = "here";
>>}
>As expected. Use other methods to get element references, like
>getElementsByTagName() (returns a collection of elements with a given
>name), [...]
>
A given *tag* name, or better: element type.
Typo. Could cause some confusion. Sorry.

Gregor



--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
Closed Thread