How to change text color using Javascript

Question

I want my quotes to be differently colored to quotes that aren't mine. Quotes that aren't mine I want to be black.

Hi, for an assignment I have to change a document to randomize the quotes displayed on it, add my own quotes, and to change their text color. I have tried to do it, but my quotes do not change color. Please help.

<html>

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>My Web Page Of Wisdom</title> 
      <style type="text/css">
         .full-page { position:absolute; top:0; right:0; bottom:0; left:0; }
         .x-center-y-center-column { display:flex; flex-direction:column; justify-content:center; align-items:center; }
         .quote { padding:0.5em; text-align:center; font-size:1.5rem; color:#336699; }
         .author { text-align:center; font-size:1rem; color:#a0a0a0; opacity:1.0; transition:all 1.0s; }
         .navigation-buttons { position:absolute; bottom:1.0em; }
      </style> 
   </head>
  <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="OnNext()">></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:"This is a quote.", Author: "Danny", color: "#ff0000" },
            { Text:"This is quote 2.", Author: "Danny", color: "#0000FF" },
            { Text:"This is quote 3.", Author: "Danny", color: "#FF7F50" }
         ]

         OnNext = () => {
            CurrentQuoteIndex = Math.floor( Math.random() * Quotes.length ) + 1;
            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;

             if( Quotes[QuoteIndex].color )
                 {
                     Quotes.style.color = Quotes[QuoteIndex].color;
                 }
             else 
             {
                 Quotes.style.color = "#000000";
             }
         }
      </script>
 </body>

</html>

Ali Torki · Accepted Answer · 2019-01-25 00:06:25Z

1

As I understand, you have created Quote and Author variables that these selected blocks id but in the if statement, you have assigned Quotes variable that it's an array and it doesn't have any relation with the DOM

However, for solving the problem, you have to use Quote in your if statement like below:

if (Quotes[QuoteIndex].color) {
    Quote.style.color = Quotes[QuoteIndex].color;
} else {
    Quote.style.color = "#000000";
}

I hope this answer will be useful.

edited Jan 25, 2019 at 0:06

answered Jan 24, 2019 at 23:57

Ali Torki

2,0481 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change text color using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related