Javascript- Add attributes for html <a href> using javascript: javascript, add, attribute, href, html

by: jasonsbytesPosted on 2008-01-22 at 20:22:33ID: 20720792

document.getElementByTagName('a')[0].rel="dropmenu1";
document.getElementByTagName('a')[0].class="classname";

The numbers in [0] need to correspond to the order of the a tags from top down.

by: jasonsbytesPosted on 2008-01-22 at 20:25:19ID: 20720804

or try:
document.getElementByTagName('a')[0].setAttribute("rel", 'dropmenu1');

by: onebite2Posted on 2008-01-23 at 07:41:50ID: 20724156

I have many html <a href> tags on page how would my javascript a tag attribute correspond to that particular one i need ..

Here goes my script and sample HTML,plz suggest me a work around for this.
<SCRIPT>
function highlight(id)
{

document.getElementByTagName('a')[3].setAttribute("rel", 'dropmenu1');
}
}
function nohigh(id)
{
document.getElementById(id).className=el1;
}</SCRIPT>

<LI>
<a href="http://www.dynamicdrive.com" class="tab_on_left" onmouseover="highlight(this);" onmouseout="nohigh(this);"><span>Home</span></a></li>
 <a href="#" rel="dropmenu1" class="tab_on_left" onmouseover="highlight(this);" onmouseout="nohigh(this);">Procs</a>
 <a href="#" rel="dropmenu2" onmouseover="highlight(this);" onmouseout="nohigh(this);">Documents</a>
 <a href="#" rel="dropmenu3">Press Room</a></li>
 <a href="#" rel="dropmenu4">Resources</a></li>
 <a href="#" rel="dropmenu5">Downloads</a></li>
</LI>
 
 
 
<div id="dropmenu1" class="dropmenudiv" style="width:150px">
 
    <div class="shadow">
    <div class="menuitems">
        <a href="/go/tray_ind_broadcast_media">Media</a>
         <a href="/go/tray_ind_education">education</a>
         <a href="/go/tray_ind_finance">finance</a>
         <a href="/go/tray_ind_govt">govt</a>
        </a>
</div>
</div>  
</div>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

Select all Open in new window

by: jasonsbytesPosted on 2008-01-23 at 08:07:25ID: 20724446

You could add an id to each one:
<a id="someID"

by: onebite2Posted on 2008-01-23 at 08:16:53ID: 20724564

I did add id="2" but no luck its still the same.....I remember you gave an other workaround in my other post with highlight(this);...that didn't work too.....

Can u suggest me any other method in detail?

Thanks,
CINDY.

by: hieloPosted on 2008-01-26 at 22:07:48ID: 20752632

Read my comments below. I "fixed" your code as best I could. Don't really understand what you are trying to do based on the code fragment you posted.
FYI: "Javascript doesn't work as long as rel exists on <a href>"
rel and javascript are completely unrelated. One will not interfere with the other. Your issue must be related to the fact that document.getElementsByTagName was mistyped (read below).

The code you posted has syntax errors:
function highlight(id)
{
//Typo here. It should be document.getElementsByTagName
// you missed the s
document.getElementByTagName('a')[3].setAttribute("rel", 'dropmenu1');
}
} //<== No matching brace
function nohigh(id)
{
//the error hers is that when you call nohigh as "nohigh(this)", id is NOT a string, it is a an object reference. The argument to document.getElementById MUST be a string. So you need to check if the argument is a string argument for you to use document.getElementById().

document.getElementById(id).className=el1;
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
	<style type="text/css"><!--
	.alpha{background-color:red;}
	.beta{background-color:lightblue;}
	--></style>
	<script type="text/javascript"><!--
	var el1="alpha";
function highlight(id)
{    
	document.getElementsByTagName('a')[3].setAttribute("rel", 'dropmenu1');
}
 
function nohigh(id)
{
	if("string"==typeof(id))
		document.getElementById(id).className=el1;
	else
		id.className=el1;
}
	//--></script>
</head>
<body>
<ul>
<li>
<a href="http://www.dynamicdrive.com" class="tab_on_left" onmouseover="highlight(this);" onmouseout="nohigh(this);"><span>Home</span></a></li>
 <a href="#" rel="dropmenu1" class="tab_on_left" onmouseover="highlight(this);" onmouseout="nohigh(this);">Procs</a>
 <a href="#" rel="dropmenu2" onmouseover="highlight(this);" onmouseout="nohigh(this);">Documents</a>
 <a href="#" rel="dropmenu3">Press Room</a></li>
 <a href="#" rel="dropmenu4">Resources</a></li>
 <a href="#" rel="dropmenu5">Downloads</a></li>
</li>
</ul>
 
 
<div id="dropmenu1" class="dropmenudiv" style="width:150px">
 
    <div class="shadow">
    <div class="menuitems">
        <a href="/go/tray_ind_broadcast_media">Media</a>
         <a href="/go/tray_ind_education">education</a>
         <a href="/go/tray_ind_finance">finance</a>
         <a href="/go/tray_ind_govt">govt</a>
        </a>
</div>
</div>  
</div>
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:

Select all Open in new window

by: ZvonkoPosted on 2008-01-27 at 21:14:29ID: 20756977

If you call the function like this:
<a href="http://www.dynamicdrive.com" class="tab_on_left" ><span>Home</span></a>

Then your functions are as simple as this:
<SCRIPT>
function highlight(theLink){
theLink.setAttribute("rel", 'dropmenu1');
}

function nohigh(theLink){
theLink.className='el1';
}
</SCRIPT>

Or do you want to highlight different links then hovered?

By the way, do you know the hover attribute of anchor links style?
http://www.w3schools.com/css/tryit.asp?filename=trycss_link2

by: onebite2Posted on 2008-02-09 at 18:05:22ID: 20859713

Non of the above solutions worked but i figured a work around. Please stop monitoring on this questions

by: ZvonkoPosted on 2008-02-10 at 01:43:47ID: 20860650

Show your solution here please.

by: onebite2Posted on 2008-02-15 at 06:27:33ID: 20901878

Non of the above solutions worked but i figured a work around. Please stop monitoring on this questions

by: onebite2Posted on 2008-02-15 at 06:30:36ID: 20901928

Work around i did is different all together and it has nothing to do with this question. Please stop monitoring on this question.

Thanks

by: ZvonkoPosted on 2008-02-15 at 06:39:35ID: 20902034

I am against the delition of this question.

by: ZvonkoPosted on 2008-02-15 at 07:39:12ID: 20902649

By memebership rules you have to show your solution to have this question closed and points refunded. Otherwise Mods and Admins decide how to proceed.

And I object deleting my work on your question here.

I opt for PAQ - No refund.

by: onebite2Posted on 2008-02-15 at 11:07:43ID: 20904879

You guys are dragging now, I didn't work on this. My colleagues were assigned to task.
can you delete it now. Please

by: ZvonkoPosted on 2008-02-17 at 12:56:06ID: 20915626

My recommendation is:

PAQ, No points refund.

by: ZvonkoPosted on 2008-02-18 at 06:45:51ID: 20920265

@Computer101: can you please unaccept my comment again and make it please PAQ.

It seams onebite2 expresses his member name and ignores my comments.

by: NetminderPosted on 2008-02-29 at 11:51:28ID: 21016886

Closed, no points refunded.
Netminder
Site Admin

Question

Javascript- Add attributes for html <a href> using javascript

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press