為什么按鈕的背景沒有改變顏色？

Question

單擊按鈕本身時，我試圖更改按鈕主體和按鈕的顏色。

現在，頁面的主體會隨機更改顏色。 但是，這不適用於按鈕本身。

有任何想法嗎？

這是按鈕的CSS：

#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;
}

這是我的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;
}

謝謝

Answer 1

您的元素選擇器不正確。 使用document.getElementById選擇元素。

// 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

您在此行遇到問題：

document.loadQuote.style.backgroundColor = color; ;

基本上loadQuote不是document的對象。

相反，您需要使用document.getElementById()選擇一個DOM元素，例如：

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

或使用傳遞CSS選擇器的Document.querySelector()只是一個示例：

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

有關document.querySelector()更多信息，可以在這里找到：

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector