How do I change the font color of a specific value in an object?

Question

I want to change the font color of a value in an object using JavaScript. For example, I want to change the color of "Ciao":

     const Quotes = [{Text: "Hello", Author: "Him"},
     {Text: "Goodbye", Author: "Her"},
     {Text: "Ciao", Author: "Me"}]

I have tried doing what my other classmates have done which is to add the color key in the object:

     const Quotes = [{Text: "Hello", Author: "Him"},
     {Text: "Goodbye", Author: "Her"},
     {Text: "Ciao", Author: "Me", "color":"red"}]

Here is my code:

<body onload="RenderQuote(0)">
  <section class="full-page x-center-y-center-column">
     <div id="quote-block" class="quote"></div>
     <div id="author-block" class="author"></div>
     <div class="navigation-buttons">
        <button onclick="RandomQuote()">Random</button>
     </div>            
  </section>
  <script>
     let CurrentQuoteIndex = 0;
     const Quotes = [
        { Text:"Apparently there is nothing that cannot happen today.", Author:"Mark Twain" },
        { Text:"The world's most famous and popular language is music.", Author:"Henri de Toulouse-Lautrec" },
        { Text:"Life is like riding a bicycle.<br>To keep your balance you must <b>keep moving</b>.", Author:"Albert Einstein" },
        { Text:"Life is a marathon, know when to take a break.", Author:"My Name" },
        { Text:"Take care of yourself as if you're taking care of someone else.", Author:"My Name" },
        { Text:"Remember to take your pills.", Author:"My Name" }
     ]
     RandomQuote = () => {
        CurrentQuoteIndex = Math.floor(Math.random() * (Quotes.length));
        RenderQuote(CurrentQuoteIndex);
     }
     RenderQuote = (QuoteIndex) => {
        let Quote = document.getElementById("quote-block");
        let Author = document.getElementById("author-block");

        Quote.innerHTML = Quotes[QuoteIndex].Text;

        Author.innerHTML = Quotes[QuoteIndex].Author;

     }
  </script>

if any answer helps, you can accept it by click on gray big "check" button on its left side (only one answer). If you wish you can also add +10 to any author by clicking on gray upper triangle — Kamil Kiełczewski, Jan 26 '19 at 23:03

Kamil Kiełczewski · Answer 1 · 2019-01-26T22:31:12.270

You can set color like this e.g. Quote.style.color = 'rgb(244,123,234)'

<body onload="RenderQuote(0)">
  <section class="full-page x-center-y-center-column">
     <div id="quote-block" class="quote"></div>
     <div id="author-block" class="author"></div>
     <div class="navigation-buttons">
        <button onclick="RandomQuote()">Random</button>
     </div>            
  </section>
  <script>
     let CurrentQuoteIndex = 0;
     const Quotes = [
        { Text:"Apparently there is nothing that cannot happen today.", Author:"Mark Twain" },
        { Text:"The world's most famous and popular language is music.", Author:"Henri de Toulouse-Lautrec" },
        { Text:"Life is like riding a bicycle.<br>To keep your balance you must <b>keep moving</b>.", Author:"Albert Einstein" },
        { Text:"Life is a marathon, know when to take a break.", Author:"My Name" },
        { Text:"Take care of yourself as if you're taking care of someone else.", Author:"My Name" },
        { Text:"Remember to take your pills.", Author:"My Name" }
     ]
     RandomQuote = () => {
        CurrentQuoteIndex = Math.floor(Math.random() * (Quotes.length));
        RenderQuote(CurrentQuoteIndex);
     }
     RenderQuote = (QuoteIndex) => {
        let Quote = document.getElementById("quote-block");
        let Author = document.getElementById("author-block");
        let authorName = Quotes[QuoteIndex].Author;
        
        
        Quote.innerHTML = Quotes[QuoteIndex].Text;
        if(authorName=='My Name') {
            Quote.style.color = `red`;
        } else {
            Quote.style.color = `black`;
        }

        Author.innerHTML = authorName;

     }
  </script>

Thanks for the quick reply but I want to target the quotes that has Author:"My Name" in it. And the colors have to be fixed, not random. — vin_tay, Jan 26 '19 at 22:22

score 0 · Accepted Answer · answered Jan 26 '19 at 22:52

You need to set the style property when rendering the quote. example:

RenderQuote = (QuoteIndex) => {
        let Quote = document.getElementById("quote-block");
        let Author = document.getElementById("author-block");
        let authorName = Quotes[QuoteIndex].Author;


        Quote.innerHTML = Quotes[QuoteIndex].Text;
        // set quote texts color
        Quote.style.color = Quotes[QuoteIndex].color || 'black';

        Author.innerHTML = authorName;

     }

This will set the color if Quotes[QuoteIndex] has property color. Otherwise it will set text color to black.

Now last quote from this object:

 const Quotes = [{Text: "Hello", Author: "Him"},
 {Text: "Goodbye", Author: "Her"},
 {Text: "Ciao", Author: "Me", color:"red"}]

will have color red

Scott Marcus · Answer 3 · 2019-01-26T23:37:17.990

One approach would be to set up CSS classes for each author and then just apply the class that matches the author's name (minus the spaces because class names can't contain spaces).

Also, you are using Pascal Case (i.e. PascalCase) for your variable names which goes against convention in JavaScript. The only time Pascal Case should be used is with the names of constructor functions as a way to let others know that those functions should be invoked with the new keyword. All caps are used often (but not required) with constant names, but other than that, camel case (camelCase) should be used for identifiers.

Also, don't using inline HTML event attributes. There are a bunch of reasons not to use this 20+ year old technique that just won't die. Instead, do all your JavaScript work separate from the HTML.

document.querySelector("button").addEventListener("click", randomQuote);

let currentQuoteIndex = 0;
const quotes = [
  { text:"Apparently there is nothing that cannot happen today.", author:"Mark Twain" },
  { text:"The world's most famous and popular language is music.", author:"Henri de Toulouse-Lautrec" },
  { text:"Life is like riding a bicycle.<br>To keep your balance you must <b>keep moving</b>.", author:"Albert Einstein" },
  { text:"Life is a marathon, know when to take a break.", author:"My Name" },
  { text:"Take care of yourself as if you're taking care of someone else.", author:"My Name" },
  { text:"Remember to take your pills.", author:"My Name" }
];
 
function randomQuote(){
  currentQuoteIndex = Math.floor(Math.random() * (quotes.length));
  renderQuote(currentQuoteIndex);
}

function renderQuote(quoteIndex){
  let quote = document.getElementById("quote-block");
  let author = document.getElementById("author-block");
  
  quote.classList = "quote";    // Reset the class list
  
  // Replace spaces in the author name with nothing and use that resulting
  // string as the class name to apply to the <div> that is the quote
  quote.classList.add(quotes[quoteIndex].author.replace(/\s+/g, ""));
  
  quote.innerHTML = quotes[quoteIndex].text;
  author.innerHTML = quotes[quoteIndex].author;
}

button { margin:10px 0; }
.quote { font-size:1.5em; font-weight:bold; }
.author { font-style:italic; margin-left:15px; }

/* Each author's name becomes a CSS class and each gets a color. */  
.AlbertEinstein { color: green; }
.HenrideToulouse-Lautrec { color: blue; }
.MarkTwain { color: orange; }
.MyName { color: purple; }

<section class="full-page x-center-y-center-column">
  <div class="navigation-buttons">
    <button>Random</button>
  </div>   
  <div id="quote-block" class="quote"></div>
  <div id="author-block" class="author"></div>
</section>

How do I change the font color of a specific value in an object?

3 Answers3