473,685 Members | 3,033 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

SM
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_p icture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
return false;">image 2</a></li>
....

<img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
function show_picture(pi cture) {
var source = picture.getAttr ibute("href");
var cover = document.getEle mentById("cover ");

cover.setAttrib ute("src", source);

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

Any ideas?

Thanks
Marco
Jun 27 '08 #1
7 2249
SM meinte:
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_p icture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
return false;">image 2</a></li>
...

<img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
function show_picture(pi cture) {
var source = picture.getAttr ibute("href");
var cover = document.getEle mentById("cover ");

cover.setAttrib ute("src", source);

//??????doesnt work
var el_a = document.getEle mentById("a");
el_a.className = "here";
}
As expected. Use other methods to get element references, like
getElementsByTa gName() (returns a collection of elements with a given
name), or give your element a name or id and access it with
getElementById( ) or getElementsByNa me().

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
Jun 27 '08 #2
Gregor Kofler wrote:
SM meinte:
>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_p icture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
return false;">image 2</a></li>
...

<img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
function show_picture(pi cture) {
var source = picture.getAttr ibute("href");
var cover = document.getEle mentById("cover ");

cover.setAttri bute("src", source);

//??????doesnt work
var el_a = document.getEle mentById("a");
el_a.classNa me = "here";
}

As expected. Use other methods to get element references, like
getElementsByTa gName() (returns a collection of elements with a given
name), or give your element a name or id and access it with
getElementById( ) or getElementsByNa me().

Gregor

Expanding upon what you said:

He did that for cover:

<img id="cover" src="<?php echo $cd_cover; ?>" alt="" />
var cover = document.getEle mentById("cover ");
cover.setAttrib ute("src", source);

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

var el_a = document.getEle mentById("a");
Jun 27 '08 #3
SM
On May 28, 5:20 pm, Gregor Kofler <use...@gregork ofler.atwrote:
SM meinte:
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_p icture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
return false;">image 2</a></li>
...
<img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
function show_picture(pi cture) {
var source = picture.getAttr ibute("href");
var cover = document.getEle mentById("cover ");
cover.setAttrib ute("src", source);
//??????doesnt work
var el_a = document.getEle mentById("a");
el_a.className = "here";
}

As expected. Use other methods to get element references, like
getElementsByTa gName() (returns a collection of elements with a given
name), or give your element a name or id and access it with
getElementById( ) or getElementsByNa me().

Gregor

--http://photo.gregorkof ler.at::: Landschafts- und Reisefotografie http://web.gregorkofle r.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum
getElementByTag Name 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_p icture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
return false;">image 2</a></li>
...
</ul>
var els_a =
document.getEle mentById("nav_c d_imgs").getEle mentsByTagName( "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
Jun 27 '08 #4
SM meinte:
>--http://photo.gregorkof ler.at::: Landschafts- und Reisefotografie http://web.gregorkofle r.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum
Please, don't quote signatures.
getElementByTag Name doesn't work for me.
It is getElement*s*By TagName()
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?
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_p icture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
return false;">image 2</a></li>
...
</ul>
Untested:

function show_picture(cl icked_a) {
>
var els_a =
document.getEle mentById("nav_c d_imgs").getEle mentsByTagName( "a").length ;
var els_a =
document.getEle mentById("nav_c d_imgs").getEle mentsByTagName( "a");
//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
Jun 27 '08 #5
SM
On May 28, 6:39 pm, Gregor Kofler <use...@gregork ofler.atwrote:
SM meinte:
--http://photo.gregorkof ler.at:::Landsc hafts- und Reisefotografie http://web.gregorkofle r.com::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum

Please, don't quote signatures.
getElementByTag Name doesn't work for me.

It is getElement*s*By TagName()
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?
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_p icture(this);
return false;">image 1</a></li>
<li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
return false;">image 2</a></li>
...
</ul>

Untested:

function show_picture(cl icked_a) {
var els_a =
document.getEle mentById("nav_c d_imgs").getEle mentsByTagName( "a").length ;

var els_a =
document.getEle mentById("nav_c d_imgs").getEle mentsByTagName( "a");
//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,
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
Jun 27 '08 #6
Gregor Kofler wrote:
SM meinte:
>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.getEle mentById("a");
el_a.classNa me = "here";
}

As expected. Use other methods to get element references, like
getElementsByTa gName() (returns a collection of elements with a given
name), [...]
A given *tag* name, or better: element type.
getElementById( ) or getElementsByNa me().
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
Jun 27 '08 #7
Thomas 'PointedEars' Lahn meinte:
Gregor Kofler wrote:
>SM meinte:
>>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.getEle mentById("a");
el_a.classNam e = "here";
}
As expected. Use other methods to get element references, like
getElementsByT agName() (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
Jun 27 '08 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
14290
by: Eric Pickup | last post by:
I'm having a problem with the following html (I've simplified it down to a simple test case). Could anyone point out why Mozilla is having problems with this (I've tried so many variations that I can't think of any more). In the actual code I have an if statement to handle IE but I need the code to work in Mozilla and IE. <HTML> <BODY> <IFRAME width="100" height="100" NAME="Composition" ID="Composition"> </IFRAME>
2
24664
by: Dave Hammond | last post by:
I've got what should be a simple assignment of either an element value or a default string to a variable, but when the element doesn't exist I get an "Object required" error rather than an assignment of the default value. I originally used the simple statement: var v = document.getElementById('foo').value || parent.document.getElementById('foo').value || 'unknown';
3
9260
by: davidkarlsson74 | last post by:
Error: document.getElementById("folderMenu").cells has no properties File: http://www.volkswagen.se/tillbehor/js/foldermenu.js Rad: 49 The function activates different DIV:s, but doesn't seem to work on FireFox or Netscape. What could be wrong? The function: function setActiveTab(tabNo) {
2
1176
by: New guy.. please help | last post by:
"New guy.. please help" wrote: Hi, I'm a new kid onthe block.. I have a small company with a website that was developed in .net by a company for me. I want to work on it myself so I installed 2000 server at home and the added the .net framework. I can navigate for page to page with out any issue. When I click on a button to execute javascript:navigate I get and error ; Navigate.js is a script that executes "getelementbyid"
2
6308
by: yourmallu | last post by:
Hi Friends, All we are knowing that we can get the element by document.getelementbyid("default_txtname").value. But If it is not on that page if i am taking header.ascx and placing text box there than i can get value of that control by document.getelementbyid("header1_txtname").value this is works fine in the I.E 6 but the mozilla gives error for it in javascript console Error is like this: Error:...
3
3815
by: rkhurana | last post by:
Hi I am writing a JSF application that uses some third party charts. While I can see the chart but the javascript that is supposed to calla function to update chart periodically has a problem. It reports the error in the console - "document.getElementById("image1") has no properties". Pls advice. thanks rupak <?xml version="1.0" encoding="UTF-8"?> <jsp:root version="1.2" ...> ...
4
70087
by: gimme_this_gimme_that | last post by:
Hi, I have an onchange method for a select box that goes something like this (the select is in a form named aForm): function page_on_change() { pageElement = aForm.my_page_id; aForm.nav_page_name.value = pages.value]; var si = pageElement.selectedIndex;
7
3931
by: ankitoshniwal | last post by:
Hello, I have been having this problem for the whole day today, so even after i googled for the solution i was not able to get one, so i had to post to this forum. I had checked the solutions suggested on this forum but its not working for me still. Ok I would start from the beginning: Plastform: --------------- MAC OS X 10.5.2
2
3124
by: ChrisLA | last post by:
Hi; I've seen lots of discussion & disagreement on this issue, so any good explanation would be appreciated. Some people seem to think that "document.GetElementByID("MyName").submit(); should and does work. I and others have experienced that it should & doesn't work. I'll give you a little file that I tested with IE 6, FF 3, Opera & Chrome. Only the form button, document.myname.submit(); and document.forms.submit(); worked. Take a...
0
8577
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9046
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8926
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8761
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7589
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6431
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4302
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4523
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2198
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.