MacroG0D MacroG0D - 20 days ago 8
Javascript Question

How to change color of the appending element?

I created a "custom append" function that taking in two parameters and appending their's value in a one line.
I need to make the first parameter's value to append in a gray color but the second value have to stay as it is.
I tried to use a "css(property, name)" function but it didn't work.
Where is my fallacy and how to get a needed result?

var showText = function(who, str) {
if (str !== "") {
var colorWho = who.name;
colorWho.css("color", "gray");
$("#storyBoard").append("<br>" + colorWho + ": " + str + "<br>");
var element = document.getElementById("storyBoard");
element.scrollTop = element.scrollHeight;
}
};

Answer

Here you go

Fiddle

CSS

p > span {          /* If you're going to take this to a larger environment, you may want to use classes instead */
  color:gray;
}

JS

var showText = function(who, str) {
  if(str !== ""){
    var colorWho = who.name;
  $("#storyBoard").append("<p><span>"+colorWho + "</span>: " +str+ "<p>");
}

};

var obj = {
    name : "Preacher",
}

showText(obj, "Is an awesome comic book !");