CODEWITHSUNDEEP
javascripthtmlsetattribute
user2855304
user2855304

Reputation: 83

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 HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>Test</title>
</head>

<body>
<div id="test" class="time"></div>
<script src="js/script.js"></script>
</body>
</html>

This is my JavaScript code:

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

It's very simple, so it should work, but only an alert pops up, and when I check the source of page, nothing changes. To be honest - I tried several different approaches and nothing worked. It must be something really, really stupid but I can't find it.

Upvotes: 0

Views: 1927

Answers (4)

jfriend00
jfriend00

Reputation: 707696

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.

Upvotes: 0

Alex W
Alex W

Reputation: 38243

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.

Upvotes: 0

Jakob Alexander Eichler
Jakob Alexander Eichler

Reputation: 3056

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;
}

Upvotes: 0

Speedy
Speedy

Reputation: 198

Change all classes

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

Add classes:

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

Upvotes: 1

Related Questions