CODEWITHSUNDEEP
javascripthtmlcssdom-events
richetechguy
richetechguy

Reputation: 38

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.

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

Upvotes: 0

Views: 4163

Answers (5)

Bucket
Bucket

Reputation: 7521

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

Upvotes: 3

user2672373
user2672373

Reputation:

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

Upvotes: 1

yunzen
yunzen

Reputation: 33449

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.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;
// ...

Upvotes: 1

Arun Kumar
Arun Kumar

Reputation: 1667

try this

demo

function changeBack() {

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

to chage the diffent id.

Upvotes: 1

Mark Meyer
Mark Meyer

Reputation: 3733

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 ;

}

Upvotes: 4

Related Questions