버튼이 내 배경을 변경하지 않는 이유는 무엇입니까?

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

그리고 이것은 내 자바 스크립트입니다 :

// 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('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()를에

는 대신 같은 document.getElementById()를 사용하여 DOM 요소를 선택해야합니다 여기에 있습니다 :

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