Установите цвет фона на основе ввода текста пользователя

Question

Я пытаюсь создать текстовое поле, в котором пользователь может ввести одно из ключевых слов цвета, например, синий, лайм или черный, нажмите кнопку «Отправить», а цвет фона страницы будет соответственно.
Вот что у меня есть:

<label for="color">Color: </label><input type="text" name="color" size="20" id="color" /> 
<button type="button" onClick="javascript:changeBGC(color)">Submit</button> 

, а затем в моем сценарии

function changeBGC(color){ 
    document.bgColor = color; 
} 

Answer 1

Попробуйте это:

document.body.style.backgroundColor = document.getElementById('color').value; 

document.getElementById('color') является входным элементом, .value получает это значение.

Here's some more documentation о том, как установить стили css с помощью JavaScript.

Fiddle example

Answer 2

Или вы можете изменить разметку следующим образом:

<button type="button" onClick="javascript:changeBGC(color.value)">Submit</button> 
                 ^

Fiddle demo

Answer 3

Или вы можете использовать лучший подход

<label for="color">Color:</label> 
<input type="text" name="color" size="20" id="color" value=""/> 
<button type="button">Submit</button> 

var input = document.getElementById('color'); 
var button = document.querySelector('button'); 
button.addEventListener('click', function(event) { 
    event.preventDefault();  
    var color = input.value; 
    document.body.style.background = color; 
});