Изменение цвета фона css с переменными javascript

Question

Я пытаюсь установить div 'changebox' с цветом rgb, который является результатом трех рандомов. Rgbs меняются (я могу сказать по document.writes), но div просто остается белым, независимо от того, что такое rgb. Пожалуйста, помогите, чтобы коробка изменилась на правильный цвет rgb.

<div id="changeBox" style="width: 150px; height: 150px; position: absolute; top: 10%; left: 10%; background-color: white; border: 4px solid black; color: black; font-family: 'Merriweather Sans', sans-serif;"> 

<script> 
var randR = Math.floor(Math.random() * 255) + 1; 
document.write(randR+", "); 
var randG = Math.floor(Math.random() * 255) + 1; 
document.write(randG+", "); 
var randB = Math.floor(Math.random() * 255) + 1; 
document.write(randB); 

document.getElementById('changeBox').style = "background-color: rgb(" + randR + ", " + randG + ", " + randB + ");"; 
</script> 

</div> 

Answer 1

Вы должны изменить только background-color свойство:

document.getElementById('changeBox').style.backgroundColor = "rgb(" + randR + ", " + randG + ", " + randB + ")"; 

В этом случае Вытащите хвостохранилища ;, чтобы значение в силе.

Демо:http://jsfiddle.net/zc16vmjt/

Другое дело, что document.write не очень хорошая практика. Это легко избежать в этом случае и идти с appendChild:

var box = document.getElementById('changeBox'); 
var randR = Math.floor(Math.random() * 255) + 1; 
var randG = Math.floor(Math.random() * 255) + 1; 
var randB = Math.floor(Math.random() * 255) + 1; 
box.appendChild(document.createTextNode(randR + ", " + randG + ", " + randB)); 
box.style.backgroundColor = "rgb(" + randR + ", " + randG + ", " + randB + ")"; 

Демо:http://jsfiddle.net/zc16vmjt/1/

Answer 2

Не назначайте непосредственно style. Назначьте style.backgroundColor.

Answer 3

Каждый раз, когда вы:

document.write(); 

Вы перезаписана, что в теле весь документ, полностью удалив div.

var randR = Math.floor(Math.random() * 255) + 1; 
var randG = Math.floor(Math.random() * 255) + 1; 
var randB = Math.floor(Math.random() * 255) + 1; 

document.getElementById('changeBox').style.backgroundColor = "rgb(" + randR+ "," + randG+ "," + randB + ")"; 

Попробуйте это, и все должно быть в порядке. Если вы хотите увидеть значения, выведите их в отдельный div; Просто не перезаписывайте весь документ с помощью document.write();

Answer 4

У вас есть дополнительная точка с запятой и отсутствует закрывающая кавычка.

Чтобы отслеживать ваши вложенные кавычки, рекомендуется чередовать одиночные и двойные кавычки. Это упрощает понимание того, что после закрывающей круглой скобки должен быть знак кавычки, чтобы закрыть это, и за ним должна следовать кавычка, которая соответствует начальной цитате, перед фоновым цветом.