Javascript to change class of an Element

Question

This is heavily trimmed down source code from a webpage I'm working on right now.

<!--// GRID ENTRY //-->
    <li class="entry" id="sjDDulC8wt">
        <div class="entry_actions">
            <ul class="entry_actions">
                <li class='have_it'>
<a href='javascript: haveItem("name", "id", "none")'  target='_self' title='Have It' class='have_it'>%</a></li>
            </ul>
        </div>
    </li>

Inside the haveItem() function I'm trying to change the class of the <a> element from 'have_it' to 'have_it selected' to change the appearance of the element. The reason for the id is because I have dozens of these elements on the page. The javascript I'm currently using is:

var targetA = document.getElementbyID(sjDDulC8wt).getElementsbyTitle("Have_it"); 
targetA.removeClass("have_it").addClass("have_it selected");

When I click the link, the haveItem() function runs, but it doesn't change the class. How can I change my script so that clicking the link will change the class?

There are no such functions as removeClass and addClass in JavaScript. Neither does getElementsByTitle exist. I usually hesitate to reply with "use jQuery", but use jQuery. This is the kind of thing it really excels at. Your code would boil down to $('#sjDDulC8wt [title=Have_it]').addClass('selected'). — user229044
– user229044 ♦, Commented Jun 27, 2012 at 21:23
You have several problems here: (1) put the id in quotes in getElementByID. (2) getElementsByTitle does not exist. (3) even if it did exist, your second line is trying to perform single element operations on an array. (4) even if that worked, the functions addClass and removeClass don't exist. You could fix all of these problems by using jQuery. — Ben Lee
– Ben Lee, Commented Jun 27, 2012 at 21:25
@meagar, Ben Lee: There is .classList.add(). He wants HTML5, so may he use it :-) — Bergi
– Bergi, Commented Jun 27, 2012 at 21:29
Huh, it pulled up results on google. I guess it shows that I haven't worked with Javascript in over a year. I tried to get the second element from getElementbyClassName too, but that didn't work either. I have JQuery installed but I'm not familiar with it. @meagar I just tried your code with and without quotes around the id but I'm not having any luck with it. — jaimerump
– jaimerump, Commented Jun 27, 2012 at 21:35

Zhihao · Accepted Answer · 2012-07-05 01:48:16Z

4

I am assuming you are using jQuery since you are using removeClass() and addClass. Otherwise, I would recommend you link to jQuery so that the code below works, or stick with only JavaScript.

var targetA = $('#sjDDulC8wt .have_it');
targetA.addClass('selected');

For future reference, here are some things about your code that you can improve:

getElementById() accepts the id of the element you want to retrieve as a string. Basically, you should wrap your ID in ' or "
Be careful where you are putting spaces and underscores. They are not the same thing. Your list item has the title Have It, while your JavaScript has Have_it.
Capitalization matters. Have_It is not the same thing as Have_it. Be careful with this when you try to get elements by ID.
A class with spaces in it is actually multiple classes. have_it selected actually has both the have_it class and the selected class. Therefore it not necessary to remove have_it and then add have_it selected - you can go straight to adding the selected class.
The function getElementbyTitle() does not currently exist in JavaScript. Also, be careful again about capitalization. Typically, the first letter of every word in a function is capitalized. Thus, if it did exist it would be called getElementByTitle() (notice the B instead of b).

edited Jul 5, 2012 at 1:48

answered Jun 27, 2012 at 21:27

Zhihao

14.7k2 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jaimerump Over a year ago

I wasn't aware that those functions were JQuery only, the links I found them on made no reference to JQuery from what I saw. I'll go ahead and add the tag for anyone else who stumbles across this. Thanks!

Šime Vidas · Accepted Answer · 2012-06-27 21:42:09Z

1

Here:

var anchor = document.querySelector( '#sjDDulC8wt [title="Have It"]' );
if ( anchor ) anchor.classList.add( 'selected' );

Live demo: http://jsfiddle.net/UZfnh/

(Won't work in older browsers.)

answered Jun 27, 2012 at 21:42

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Comments

Bergi · Accepted Answer · 2012-06-27 21:33:48Z

0

This should do the task for you:

<a title="Have It" class="have_it" onclick="this.className+=' selected'">%</a>

However, you should learn about the DOM. None of the methods you used (getElementbyID, getElementsbyTitle, removeClass and addClass) exists.

answered Jun 27, 2012 at 21:33

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Petr Janeček · Accepted Answer · 2012-06-27 21:42:45Z

0

When you successfully find the element, you can do one of these:

element.classList.add("selected");

It uses a fairly new classList feature available for FF 3.6, IE 10, Chrome 8, Opera 11.50, Safari 5.1 and above. It the the most preferred way to do it once you are sure your clients will have one of those browsers (near future).
element.className += " selected";

className doc. This works and is probably the easiest way. Not so nice as the classList thing, but available for all browsers.

answered Jun 27, 2012 at 21:42

Petr Janeček

38.5k13 gold badges128 silver badges149 bronze badges

Comments

pb2q · Accepted Answer · 2012-06-27 21:48:18Z

If you can't use jQuery then you can change the classname of an element using className:

var element = document.getElementById("elementId");
element.className = "have_it selected";

Note also this function: getElementsByClassName (HTML5).

As has been pointed out, you have some other issues selecting your element. From your example, it looks like you want to use:

var element = document.getElementById("sjDDulC8wt");
var children = element.getElementsByClassName("have_it");
children[0].className = "have_it selected";

Note that there's no error handling/null checks here. And this handles a simple case of only changing the first child with the specified class, assuming that it exists.

But prefer jQuery if you can use that. From your use of addClass/removeClass it appears that you already expect jQuery.

Collectives™ on Stack Overflow

Javascript to change class of an Element

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related