CODEWITHSUNDEEP
javascripthtmlcss
user3138833
user3138833

Reputation:

Style.color = "blue" is not working

In my application i have a problem that the heading color is not changing. I have my code here:

    var createc = function(){

        var valu = prompt("Phone no.");
        var name = prompt("Name");
        var age = prompt("age"); 

        var CC = function(valu, name, age){
        var parent = document.createElement("div");
            parent.id = valu;
            parent.setAttribute("onclick", "info()");
        var heading = document.createTextNode("phone no: "+valu+" Name:"+name+" Age: "+age);
            heading.style.color = "blue";
        parent.appendChild(heading);    

        var ele = document.getElementById("main");
        ele.appendChild(parent);

        }(valu, name, age);

    }

here you can see in the line var heading = document.createTextNode("phone no: "+valu+" Name:"+name+" Age: "+age); i have a variable now in the next line i have written heading.style.color="blue"; which i think is correct! and if i am not please tell me what the mistake i have done

Upvotes: 0

Views: 280

Answers (1)

Quentin
Quentin

Reputation: 943999

heading is a TextNode, only ElementNodes have a style property.

Put the TextNode in a suitable ElementNode (since it is a heading, an Hn is probably the best bet) and style that.

var heading = document.createElement('h1');
heading.appendChild(
    document.createTextNode("phone no: "+valu+" Name:"+name+" Age: "+age)
);
heading.style.color = "blue";

As a rule of thumb, however, it is better to write your styles in a stylesheet and create suitable elements (with suitable classes if needed) to match the rules you've written there.

i.e. put h1 { color: blue; } in your stylesheet instead of using the last line in the code above.

Upvotes: 6

Related Questions