为什么按钮的背景没有改变颜色？

Question

I'm trying to change the color of both the body and a button when the button itself is clicked.

Right now, the body of the page changes color randomly. However this is not working for the button itself.

Any ideas?

This is my CSS for the button:

#loadQuote {
  position: fixed;
  width: 12em;
  display: inline-block;
  left: 50%;
  margin-left: -6em;
  bottom: 150px;
  border-radius: 4px;
  border: 2px solid #fff;
  color: #fff;
  background-color: #36b55c;
  padding: 15px 0;
  transition: .5s ;
}
#loadQuote:hover {
  background-color: rgba(255,255,255,.25);
}
#loadQuote:focus {
  outline: none;
}

And this is my JavaScript:

// prints quote
function printQuote(){

    var finalQuote = buildQuote();
    document.getElementById('quote-box').innerHTML = finalQuote;

    var color = '#'+Math.floor(Math.random()*16777215).toString(16);
    document.body.style.background = color;
    document.loadQuote.style.backgroundColor = color;
}

Thank you

Answer 1

Your element selector is incorrect. Use document.getElementById to select the element.

// prints quote
function printQuote(){

    var finalQuote = buildQuote();
    document.getElementById('quote-box').innerHTML = finalQuote;

    var color = '#'+Math.floor(Math.random()*16777215).toString(16);
    document.body.style.background = color;
    //BELOW LINE IS THE CHANGED CODE
    document.getElementById('loadQuote').style.backgroundColor = color;
}

Answer 2

You have an issue at this line:

document.loadQuote.style.backgroundColor = color; ;

basically loadQuote is not an object in document .

Instead you need to select a DOM element using document.getElementById() like:

document.getElementById('loadQuote'); // if you have a DOM element with ID loadQuote

Or using Document.querySelector() passing a CSS selector, just an example:

document.querySelector('.loadQuote'); // if you DOM element has .loadQuote appplied

More information on document.querySelector() can be found here:

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector