Can't change background-color or text color with click function (Random quote generator)

Can't change background-color or text color with click function (Random quote generator)
0

#1

I am currently working on the random quote generator. I am having trouble randomly changing the background color of my html body and the text colors of the quote text, quote author and button when i click the submit button. Can I get some assistance please?

https://codepen.io/bhaelar/pen/oMaBQw

$(document).ready(function() {
  function getQuote() {
    var quotes = ["And now that you don't have to be perfect, you can be good.","Everything is hard before it is easy.","Anyone who has never made a mistake has never tried anything new.","Don't let your happiness depend on something you may lose.","Even if we don't have the power to choose where we come from, we can still choose where we go from there.","We are cups, constantly and quietly being filled. The trick is knowing how to tip ourselves over and let the beautiful stuff out.","Don't cry because it's over. Smile because it happened.","We are all broken, that's how the light gets in." ];
    var authors = ["-John Steinbeck","-Johann Wolfgang von Goethe","-Albert Einstein","—C.S. Lewis","-Stephen Chbosky","-Ray Bradbury","-Dr. Seuss","-Ernest Hemingway"];
    var colors = ["#EC357E","#431024","#4229A8","#666273","#2B8F9E","#2B8F9E","#658A55","#658A55","#658A55","#3E140A"];
    var rand1 = Math.floor((Math.random() * colors.length));
    var rand = Math.floor((Math.random() * quotes.length));
    var randomQuote = quotes[rand];
    var randomAuthor = authors[rand];
    var randomColors = colors[rand1];
    console.log(randomColors);
    $("#text").text(randomQuote);
    $("#author").text(randomAuthor);
    
    $("body").css("background", "randomColors");
    $("#text").css("color","colors[rand]");
  }
 
    
    
  
  $("#new-quote").on("click",function() {
    getQuote();
   });
  
  
});

#2

you’re not actually using the variables correctly here.
I think you need something like:

let str = `${colors[rand]}`;
$("#text").css("color",str);

Edit: though the above is probably overkill for just using a single variable. Just do what @SpaniardDev said


#3

You should remove the double quotes when you want to use a variable. Otherwise you’re getting just a string.


#4

Thank you guys. It works perfectly now.