html - Multiple color change in JavaScript

I need help making this Javascript change the color of the "I love George Brown" between the div, I got it to change the font color, and when i setup the change for the background color the only color that works is the same color as the font color. Please help, I need to do this in pure JavaScript.

<html>
<body>
   
<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>

http://jsfiddle/jonrobert/tuEe6/

<html>
<body>
   
<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>

Share Improve this question edited Jun 13, 2022 at 9:09 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Oct 9, 2013 at 14:19 richetechguy 381 silver badge5 bronze badges

4 You can't use the same ID for both selects; that's invalid html, and is causing your code to fail. – bfavaretto Commented Oct 9, 2013 at 14:20
Also, "backgroundColor", not just "background". – Pointy Commented Oct 9, 2013 at 14:22
2 @Pointy Doesn't matter in this case. background is a shorthand that can accept color value. – Pavlo Commented Oct 9, 2013 at 14:24
@Pavlo It doesn't matter for actual functionality but for future reference setting using backgroundColor might make it more clear, if your pedantic that is :) – Nunners Commented Oct 9, 2013 at 14:27
@Pavlo yes you're right. I keep breaking my rule of avoiding Stackoverflow until I've had some coffee. – Pointy Commented Oct 9, 2013 at 15:17

Add a ment |

5 Answers 5

Sorted by: Reset to default 4

Both of your selects have the same id value of colorPicker. Try changing the second one to have a different id like below.

<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>

Then in the js

function changeBack()
{

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

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

}

Using duplicate IDs is going to cause you trouble, which you seem to have discovered. Make sure you don't use the same ID twice. Here is my suggestion:

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>

Your corresponding JS should reflect these changes:

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 ;
}

try this

demo

function changeBack() {

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

to chage the diffent id.

You used the same id twice An id is a unique identifier. It has to be unique in the document to work correctly.

http://jsfiddle/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;
// ...

May be you can try this

HTML for displaying a text and a button to select color

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

JS to do the magic

(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);
})();

Extend this to your needs

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Multiple color change in JavaScript - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)