JS：我如何使用生成的隨機數並將其設置爲div的背景色

Question

我有一個「var rgb」，它爲div中的每次點擊生成RGB顏色。現在我想隨機將它作爲背景顏色應用於其中一個div的「＃遊戲」中。我該怎麼做？

的index.html

<header> 
    <p class="great">xxx</p> 
    <p id="rgb">RGB(143, 80, 16)</p> 
    <p class="great">xxxx</p> 
</header> 

<nav> 
    <div id="game"> 
    <div id="newColors">NEW COLORS</div> 
    <div id="result">RESULT</div> 
    <div id="easy"><span>EASY</span> <span>HARD</span></div> 
    </div> 
</nav> 


    <div id="game"> 
    <div class="firstSquare"></div> 
    <div class="secondSquare"></div> 
    <div class="thirdquare"></div> 



    <div class="firstSquare"></div> 
    <div class="secondSquare"></div> 
    <div class="thirdquare"></div> 
    </div> 

的script.js

var r = Math.floor(Math.random() * 255); 
    var g = Math.floor(Math.random() * 255); 
    var b = Math.floor(Math.random() * 255); 
    var rgb = "RGB(" + r + "," + g + "," + b + ")"; 

    var colorRGB = document.getElementById("rgb"); 
    var headerRGB = document.getElementById("newColors"); 
    var squareOne = document.getElementById("one"); 

    headerRGB.addEventListener("click", function() { 
    colorRGB.textContent = rgb; 
    squareOne.style.backgroundColor = "rgb"; 
    }); 

Answer 1

rgb是一個變量，而不是字符串。你不小心把它放在引號中。嘗試：

squareOne.style.backgroundColor = rgb 

另外，如果你想生成每次點擊一個新的隨機顏色，把你的隨機邏輯的事件監聽器裏：

var colorRGB = document.getElementById("rgb") 
var headerRGB = document.getElementById("newColors") 
var game = document.getElementById("game") 

headerRGB.addEventListener("click", function() { 
    var r = Math.floor(Math.random() * 255) 
    var g = Math.floor(Math.random() * 255) 
    var b = Math.floor(Math.random() * 255) 
    var rgb = "RGB(" + r + "," + g + "," + b + ")" 

    colorRGB.textContent = rgb 
    var div = game.children[Math.floor(Math.random() * game.children.length)] 
    div.style.backgroundColor = rgb 
})