Random Quote styling Not working I have tried everything except the correct thing


Please help I have been trying for so many hours to style this button in the orange color and apply css.

#1 I have dramatically simplified array to get it to output the title and the quote…
#2 For some reason I am having a hell of a time styling the button.
#3 after styling the button I would like to apply style to the h1 tag’s and the quotes.
#4 After this I would like to input real quotes and titles…
#5 When all this is done I would like to input the code into my application which already is styled very nicely.

https://codepen.io/Mr-Henderson/pen/dzvGjX THANK YOU IN ADVANCE!!! :smile:

Update: to codepen with styling yet button still disappears after the first button press…


Just changed it for you to make it easy :slight_smile:

  • assign class (or id) to the button, I just named it getNewQuote
  • update css to target that class " .getNewQuote {} " and you are all set.

I usually start with functionality then worry about design, since you can always come back and just do that with CSS.

I suggest codepen over jsfiddle is easier as you do not have to click run all the time, and more widely used really (but that is just preference)


thank you @codeninja15 yet notice when you click the button no quotes seem to pop up for some reason…
I have gone between no styling with quotes popping up to styling without quotes popping up … just need both please, thanks again…


You do not have any Ajax call in there or did you mean the hard coded test you included(that part showed on my end)


Currently, your HTML shows:

  <div class="quote" id="quoteDisplay">
    <!-- Quotes will display here -->
    <button class="getNewQuote" onclick="newQuote()">New Quote</button>

Your newQuote function has the following:

document.getElementById('quoteDisplay').innerHTML = quote[randomNum];

When you assign something using .innerHTML, all existing HTML inside of what you target is replaced with what you assign it. Your button is inside the quoteDisplay div, so it gets replace with the new quote. The solution is very simple, so I will leave it to you to figure out what to do.

P.S. You have an unnecessary in your HTML which you should remove.


yeh still have no clue on this one …