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?

Answer 1

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:

1. getElementById() accepts the id of the element you want to retrieve as a string. Basically, you should wrap your ID in ' or "
2. 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.
3. Capitalization matters. Have_It is not the same thing as Have_it. Be careful with this when you try to get elements by ID.
4. 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.
5. 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).