使用Javascript將Div的背景色更改為變量的值

Question

我一直在嘗試將div的顏色更改為隨機生成的十六進制顏色代碼，該顏色代碼傳遞給變量。 我該如何工作？

HTML

<p id="demo">NULL</p>
<button onclick="generatePassword()">Generate</button>
<div id="showcase" style="background: #FFFFFF; width: 200px; height: 200px; margin: 20px; border-radius: 3px;"></div>

JAVASCRIPT

var result = document.getElementById('demo').innerHTML;

function generatePassword() {
    var length = 6,
        charset = "ABCDEF0123456789",
        retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
        retVal += charset.charAt(Math.floor(Math.random() * n));
    }
    document.getElementById('demo').innerHTML = "#" + retVal;
    return document.getElementById('showcase').style.backgroundColor = retVal;
}

鏈接到小提琴： https : //jsfiddle.net/elliotsoomro/gngg89t5/5/

Answer 1

您幾乎已經明白了，這里是解決方法： https : //jsfiddle.net/yL1uu6bz/1/

var result = document.getElementById('demo').innerHTML;

function generatePassword() {
    var length = 6,
        charset = "ABCDEF0123456789",
        retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
        retVal += charset.charAt(Math.floor(Math.random() * n));
    }
    var finalVal = "#" + retVal;
    document.getElementById('demo').innerHTML = finalVal;
    return document.getElementById('showcase').style.backgroundColor = finalVal;
}

我只是簡單地添加了哈希符號，並以與輸出值（ "#" + retVal ）相同的方式附加了它，然后將其添加到變量（ finalVal ）中，然后將其輸出。