Can't Change Html Attribute With External Script

I've got a little problem with my JavaScript. I'm trying to learn how to change the attribute on a page using setAttribute(name, value), and nothing happens. This is my test site's

Solution 1:

Change all classes

document.getElementById("test").className = test;

Add classes:

document.getElementById("test").className += test;

Solution 2:

This is how I helped me when I started with JS and did not like to use JQuery.

    function hasClass(element,class){
    if(element==null){
        return false;
    }
    ret = false;
    var classes = element.className.split(" ");
    for(var i=0;i<classes.length;i++){
        if(classes[i]==class){ret = true;}
    }
    return ret;
}
function removeClass(element,class){
    if(hasClass(element,class)){
        if(element.className==class){
            element.className = "";
        }else{
            var classes = element.className.split(" ");
            element.className = "";
            var unset = false;
            for(var i=0;i<classes.length;i++){
                if(classes[i]!=class){
                    if(unset && element.className==""){
                        element.className = classes[i];
                        unset = true;
                    }
                    element.className+=" "+classes[i];
                }
            }
        }
    }
}
function addClass(element,class){
    if(!hasClass(element,class)){
        if(element.className!=""){
            element.className += " "+class;
        }else{
            element.className = class;
        }
    }
}
function getElementsByClassName(tag,class){
    var ret = new Array();
    var elements = document.getElementsByTagName(tag);
    for(var i = 0;i<elements.length;i++){
        var element = elements[i];
        var classes = element.className.split(" ");
        for(var k = 0; k<classes.length;k++){
            if(classes[k]==class){ret[(ret.length)]=elements[i];}
        }
    }
    return ret;
}

Solution 3:

What you say you're doing:

I'm trying to learn how to change attribute on page using setAttribute(name, value) and nothing happens.

What you're actually doing:

if(document.getElementById("test").hasAttribute("class"))
{
    alert("got message");
    var test = "test";

document.getElementById("test").attr("class", test);

}

You need to change .attr(..) to .setAttribute(..)

Also, be aware that setAttribute will overwrite instead of concatentate the value of the attribute you specify.

Solution 4:

You can just use the .className property of DOM objects to access the class attribute.

You can replace your code with this:

// if the class name is not empty, then change it
if (document.getElementById("test").className) {
    alert("got message");
    document.getElementById("test").className = "test";
}

Working demo: http://jsfiddle.net/jfriend00/x25Lj/

P.S. There is no .attr() method on DOM objects. You may have seen that used with jQuery objects which you do not have here.