469,271 Members | 1,047 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

How do I add a class to an <a> tag on a onclick() event using Javascipt/DOM?

SM
Hello,
I have an <ul>, and when i click on a item i want to add a class to
that item. The class itself will change some display properties, using
CSS. See code below.
But, whenever i click on a item, the CSS properties, always applies to
the last item in the list.

How can i achieve this using JavaScript and the DOM?
-------------------
var ul = document.createElement('ul');
ul.className = 'cdTrack';

....
for(var j=0; j<titleTrackElems.length; j++)
{
li = document.createElement('li');

liValue =
document.createTextNode(titleTrackElems.item(j).ch ildNodes[0].nodeValue);
li.appendChild(liValue);

a = document.createElement('a');
a.setAttribute('href', '#');
aValue = document.createTextNode(...);
a.appendChild(aValue);
a.onclick = function () { a.className='here'; };

li.appendChild(a);
}

ul.appendChild(li);
....
-------------------

Thanks
Marco

May 23 '07 #1
5 2522
SM said the following on 5/23/2007 1:57 PM:
Hello,
I have an <ul>, and when i click on a item i want to add a class to
that item. The class itself will change some display properties, using
CSS. See code below.
But, whenever i click on a item, the CSS properties, always applies to
the last item in the list.

How can i achieve this using JavaScript and the DOM?
-------------------
var ul = document.createElement('ul');
ul.className = 'cdTrack';

...
for(var j=0; j<titleTrackElems.length; j++)
{
li = document.createElement('li');

liValue =
document.createTextNode(titleTrackElems.item(j).ch ildNodes[0].nodeValue);
li.appendChild(liValue);

a = document.createElement('a');
a.setAttribute('href', '#');
aValue = document.createTextNode(...);
a.appendChild(aValue);
a.onclick = function () { a.className='here'; };
this.className;

And then ask about "this" and the issue that will arise from it.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
May 23 '07 #2
SM
On May 23, 5:26 pm, Randy Webb <HikksNotAtH...@aol.comwrote:
SM said the following on 5/23/2007 1:57 PM:
Hello,
I have an <ul>, and when i click on a item i want to add a class to
that item. The class itself will change some display properties, using
CSS. See code below.
But, whenever i click on a item, the CSS properties, always applies to
the last item in the list.
How can i achieve this using JavaScript and the DOM?
-------------------
var ul = document.createElement('ul');
ul.className = 'cdTrack';
...
for(var j=0; j<titleTrackElems.length; j++)
{
li = document.createElement('li');
liValue =
document.createTextNode(titleTrackElems.item(j).ch ildNodes[0].nodeValue);
li.appendChild(liValue);
a = document.createElement('a');
a.setAttribute('href', '#');
aValue = document.createTextNode(...);
a.appendChild(aValue);
a.onclick = function () { a.className='here'; };

this.className;

And then ask about "this" and the issue that will arise from it.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/
Hey Randy,
I've try it, but doesn't seem to work?
What is the issue that will arise from it?

Thanks
Marco

May 25 '07 #3
SM
On May 25, 7:13 pm, SM <servandomont...@gmail.comwrote:
On May 23, 5:26 pm, Randy Webb <HikksNotAtH...@aol.comwrote:
SM said the following on 5/23/2007 1:57 PM:
Hello,
I have an <ul>, and when i click on a item i want to add a class to
that item. The class itself will change some display properties, using
CSS. See code below.
But, whenever i click on a item, the CSS properties, always applies to
the last item in the list.
How can i achieve this using JavaScript and the DOM?
-------------------
var ul = document.createElement('ul');
ul.className = 'cdTrack';
...
for(var j=0; j<titleTrackElems.length; j++)
{
li = document.createElement('li');
liValue =
document.createTextNode(titleTrackElems.item(j).ch ildNodes[0].nodeValue);
li.appendChild(liValue);
a = document.createElement('a');
a.setAttribute('href', '#');
aValue = document.createTextNode(...);
a.appendChild(aValue);
a.onclick = function () { a.className='here'; };
this.className;
And then ask about "this" and the issue that will arise from it.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Hey Randy,
I've try it, but doesn't seem to work?
What is the issue that will arise from it?

Thanks
Marco
Sorry, just try it again, and it does work! But, whenever i click on a
link the 'here' class applies correctly but if i click again on
another link the class also applies (wich makes sense)

Im trying to highlight only the one selected. Is that the issue you
were talking about?

Thanks
Marco

May 25 '07 #4
On May 26, 9:26 am, SM <servandomont...@gmail.comwrote:
On May 25, 7:13 pm, SM <servandomont...@gmail.comwrote:
On May 23, 5:26 pm, Randy Webb <HikksNotAtH...@aol.comwrote:
SM said the following on 5/23/2007 1:57 PM:
Hello,
I have an <ul>, and when i click on a item i want to add a class to
that item. The class itself will change some display properties, using
CSS. See code below.
But, whenever i click on a item, the CSS properties, always applies to
the last item in the list.
How can i achieve this using JavaScript and the DOM?
-------------------
var ul = document.createElement('ul');
ul.className = 'cdTrack';
...
for(var j=0; j<titleTrackElems.length; j++)
{
li = document.createElement('li');
liValue =
document.createTextNode(titleTrackElems.item(j).ch ildNodes[0].nodeValue);
li.appendChild(liValue);
a = document.createElement('a');
a.setAttribute('href', '#');
aValue = document.createTextNode(...);
a.appendChild(aValue);
a.onclick = function () { a.className='here'; };
this.className;
And then ask about "this" and the issue that will arise from it.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/
Hey Randy,
I've try it, but doesn't seem to work?
What is the issue that will arise from it?
Thanks
Marco

Sorry, just try it again, and it does work! But, whenever i click on a
link the 'here' class applies correctly but if i click again on
another link the class also applies (wich makes sense)

Im trying to highlight only the one selected. Is that the issue you
were talking about?
I don't think so - I think Randy was expecting you to discover more
about a function's this keyword.

Anyhow, what you want to do is to remove the classname from the last
link and add it to the current link. You can use a global variable to
do that, or you can remove the class from all the links and add it to
just the last one. Below is some stuff that does that, doing it
properly likely takes more code than you thought. Tested in Safari
and Firefox:
// Modified trim from clj FAQ to also remove multiple spaces
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,'').replace(/\s+/,' ');
}

// Utility function namespace
var xU = xU || {};

// Add a className
xU.addClass = function (el, className){
var re = new RegExp('(^|\\s)'+className+'(\\s|$)');
if (!re.test(el.className)) {
el.className += (' ' + className).trim();
}
}

// Remove a className
xU.removeClass = function (el, className){
var re = new RegExp('(^|\\s)'+className+'(\\s|$)');
el.className = (el.className.replace(re, ' ')).trim();
}

// See if el has className
xU.hasClassname = function (el, className){
var re = new RegExp('(^|\\s)'+className+'(\\s|$)');
return (re.test(el.className));
}

// Return an element by tagName. If el's tag name isn't
// tagName, search up DOM tree. Return the first match
// or null if none found.
xU.upToTagname = function (el, tagName){
while (el.parentNode && el.tagName.toLowerCase() != tagName) {
el = el.parentNode;
}
return (el.tagName &&
el.tagName.toLowerCase() == tagName)? el : null;
}

// Highlight the last A element that was clicked on
function highLightLastLink(e){
var e = e || window.event;
var tgt = e.target || e.srcElement;

// If can't find A, or already has className, return
if ( !(tgt = xU.upToTagname(tgt, 'a')) ||
xU.hasClassname(tgt, 'red')) {
return;
}

// Remove className from any A that has it
var aElements = document.getElementsByTagName('a');
var i = aElements.length;
while (i--){
xU.removeClass(aElements[i], 'red')
}

// Add className
xU.addClass(tgt, 'red');
}

window.onload = function(){
document.body.onclick = highLightLastLink;
}
--
Rob

May 26 '07 #5
SM
On May 25, 10:55 pm, RobG <r...@iinet.net.auwrote:
On May 26, 9:26 am, SM <servandomont...@gmail.comwrote:
On May 25, 7:13 pm, SM <servandomont...@gmail.comwrote:
On May 23, 5:26 pm, Randy Webb <HikksNotAtH...@aol.comwrote:
SM said the following on 5/23/2007 1:57 PM:
Hello,
I have an <ul>, and when i click on a item i want to add a class to
that item. The class itself will change some display properties, using
CSS. See code below.
But, whenever i click on a item, the CSS properties, always applies to
the last item in the list.
How can i achieve this using JavaScript and the DOM?
-------------------
var ul = document.createElement('ul');
ul.className = 'cdTrack';
...
for(var j=0; j<titleTrackElems.length; j++)
{
li = document.createElement('li');
liValue =
document.createTextNode(titleTrackElems.item(j).ch ildNodes[0].nodeValue);
li.appendChild(liValue);
a = document.createElement('a');
a.setAttribute('href', '#');
aValue = document.createTextNode(...);
a.appendChild(aValue);
a.onclick = function () { a.className='here'; };
this.className;
And then ask about "this" and the issue that will arise from it.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/
Hey Randy,
I've try it, but doesn't seem to work?
What is the issue that will arise from it?
Thanks
Marco
Sorry, just try it again, and it does work! But, whenever i click on a
link the 'here' class applies correctly but if i click again on
another link the class also applies (wich makes sense)
Im trying to highlight only the one selected. Is that the issue you
were talking about?

I don't think so - I think Randy was expecting you to discover more
about a function's this keyword.

Anyhow, what you want to do is to remove the classname from the last
link and add it to the current link. You can use a global variable to
do that, or you can remove the class from all the links and add it to
just the last one. Below is some stuff that does that, doing it
properly likely takes more code than you thought. Tested in Safari
and Firefox:

// Modified trim from clj FAQ to also remove multiple spaces
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,'').replace(/\s+/,' ');

}

// Utility function namespace
var xU = xU || {};

// Add a className
xU.addClass = function (el, className){
var re = new RegExp('(^|\\s)'+className+'(\\s|$)');
if (!re.test(el.className)) {
el.className += (' ' + className).trim();
}

}

// Remove a className
xU.removeClass = function (el, className){
var re = new RegExp('(^|\\s)'+className+'(\\s|$)');
el.className = (el.className.replace(re, ' ')).trim();

}

// See if el has className
xU.hasClassname = function (el, className){
var re = new RegExp('(^|\\s)'+className+'(\\s|$)');
return (re.test(el.className));

}

// Return an element by tagName. If el's tag name isn't
// tagName, search up DOM tree. Return the first match
// or null if none found.
xU.upToTagname = function (el, tagName){
while (el.parentNode && el.tagName.toLowerCase() != tagName) {
el = el.parentNode;
}
return (el.tagName &&
el.tagName.toLowerCase() == tagName)? el : null;

}

// Highlight the last A element that was clicked on
function highLightLastLink(e){
var e = e || window.event;
var tgt = e.target || e.srcElement;

// If can't find A, or already has className, return
if ( !(tgt = xU.upToTagname(tgt, 'a')) ||
xU.hasClassname(tgt, 'red')) {
return;
}

// Remove className from any A that has it
var aElements = document.getElementsByTagName('a');
var i = aElements.length;
while (i--){
xU.removeClass(aElements[i], 'red')
}

// Add className
xU.addClass(tgt, 'red');

}

window.onload = function(){
document.body.onclick = highLightLastLink;

}

--
Rob
Wow! ok, wasn't expecting that much code to highlight a simple text.
Thanks anyways
Marco

May 26 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Raghul | last post: by
2 posts views Thread by Donald Firesmith | last post: by
reply views Thread by Jonah Olsson | last post: by
reply views Thread by Shrage H. Smilowitz | last post: by
reply views Thread by Mark Parter | last post: by
3 posts views Thread by ajay2552 | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.