爲什麼不是我的背景改變顏色的按鈕？

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

或者使用Document.querySelector()傳遞一個CSS選擇器，只是一個例子：在document.querySelector()

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

更多信息可以在這裏找到：

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