Несколько изменений цвета в Javascript

Question

Мне нужна помощь, чтобы этот Javascript менял цвет «Я люблю Джорджа Брауна» между div, я получил его, чтобы изменить цвет шрифта, и когда я настраиваю изменение цвета фона только цвет, который работает, имеет тот же цвет, что и цвет шрифта. Пожалуйста, помогите, мне нужно сделать это в чистом javascript.

http://jsfiddle.net/jonrobert/tuEe6/

<script> 
    function changeColor() 
    { 
     var newColor = document.getElementById('colorPicker').value; 
     document.getElementById('colorMsg').style.color = newColor; 
    } 
    function changeBack() 
    { 
     var back = document.getElementById('colorPicker').value;  
     document.getElementById('colorMsg').style.background = back ; 
    }  
</script> 

<div id="colorMsg" style="font-size:50px; text-align:center; margin-bottom:200px;width:150px;height:100px;padding:5px;">I LOVE GEORGE BROWN</div>                       

<h2>Choose Font Color</h2> 

<select id="colorPicker" onchange="JavaScript:changeColor()"> 
    <option value="transparent">None</option> 
    <option value="yellow">Yellow</option> 
    <option value="salmon">Salmon</option> 
    <option value="lightblue">Light Blue</option> 
    <option value="limegreen">Lime Green</option> 
    <option value="cyan">Cyan</option> 
    <option value="violet">Violet</option> 
    <option value="red">Red</option> 
</select> 
<div id="colorMsg"></div> 

<h2>Choose Background Color:</h2> 

<select id="colorPicker" onchange="JavaScript:changeBack()"> 
    <option value="transparent">None</option> 
    <option value="yellow">Yellow</option> 
    <option value="salmon">Salmon</option> 
    <option value="lightblue">Light Blue</option> 
    <option value="limegreen">Lime Green</option> 
    <option value="cyan">Cyan</option> 
    <option value="violet">Violet</option> 
    <option value="red">Red</option> 
</select> 
</body> 
</html> 

Answer 1

Оба ваших выбора имеют одинаковое значение id colorPicker. Попробуйте изменить второй, чтобы иметь другой идентификатор, как показано ниже.

<h2>Choose Background Color:</h2> 

<select id="colorPickerBackground" onchange="JavaScript:changeBack()"> 
    <option value="transparent">None</option> 
    <option value="yellow">Yellow</option> 
    <option value="salmon">Salmon</option> 
    <option value="lightblue">Light Blue</option> 
    <option value="limegreen">Lime Green</option> 
    <option value="cyan">Cyan</option> 
    <option value="violet">Violet</option> 
    <option value="red">Red</option> 
</select> 

Тогда в JS

function changeBack() 
{ 

    var back = document.getElementById('colorPickerBackground').value;  

    document.getElementById('colorMsg').style.background = back ; 

} 

Answer 2

Использование повторяющихся идентификаторов собирается причинить вам неприятности, которые вы, кажется, обнаружили. Убедитесь, что вы не используете один и тот же идентификатор дважды. Вот мое предложение:

JSFiddle

HTML

<select id="foregroundColorPicker" onchange="JavaScript:changeColor()"> 
    <option value="transparent">None</option> 
    <option value="yellow">Yellow</option> 
    <option value="salmon">Salmon</option> 
    <option value="lightblue">Light Blue</option> 
    <option value="limegreen">Lime Green</option> 
    <option value="cyan">Cyan</option> 
    <option value="violet">Violet</option> 
    <option value="red">Red</option> 
</select> 

<select id="backgroundColorPicker" onchange="JavaScript:changeBack()"> 
    <option value="transparent">None</option> 
    <option value="yellow">Yellow</option> 
    <option value="salmon">Salmon</option> 
    <option value="lightblue">Light Blue</option> 
    <option value="limegreen">Lime Green</option> 
    <option value="cyan">Cyan</option> 
    <option value="violet">Violet</option> 
    <option value="red">Red</option> 
</select> 

Ваши соответствующие JS должны отражать эти изменения:

Javascript

function changeColor(){ 
    var newColor = document.getElementById('foregroundColorPicker').value; 
    document.getElementById('colorMsg').style.color = newColor; 
} 

function changeBack(){ 
    var back = document.getElementById('backgroundColorPicker').value;  
    document.getElementById('colorMsg').style.backgroundColor = back ; 
}  

Answer 3

попробовать это

demo

function changeBack() { 

var back = document.getElementById('colorPicker_back').value; 
document.getElementById('colorMsg').style.background = back; 
} 

к Ставить в diffent идентификатор.

Answer 4

Вы использовали один и тот же идентификатор дважды Идентификатор - уникальный идентификатор. Он должен быть уникальным в документе для правильной работы.

http://jsfiddle.net/HerrSerker/tuEe6/4/

<!-- ... --> 
<select id="colorPicker1" onchange="JavaScript:changeColor()"> 
<!-- ... --> 
<select id="colorPicker2" onchange="JavaScript:changeBack()"> 
<!-- ... --> 

---

// ... 
var newColor = document.getElementById('colorPicker1').value; 
// ... 
var back = document.getElementById('colorPicker2').value; 
// ... 

Answer 5

Может быть, вы можете попробовать это

HTML для отображения текста и кнопку для выбора цвета

<span id="text">Hello World</span> 
<input type="button" id="red" value="Red" /> 

JS сделать то магия

(function() { 
    var oText = document.getElementById('text'); 
    var oRed = document.getElementById('red'); 
    oRed.addEventListener('click', function() { 
     oText.setAttribute('style', 'color: red'); 
     //oText.setAttribute('style', 'background-color: blue'); //In case of background color 
    }, false); 
})(); 

Продлить это для ваших нужд