Change an element's background color when clicking a different element

Question

I am expecting the element, id="colorDisp" to change color when I run one of the functions below, but instead the body element changes color.

Code below:

function red()
 {
  document.body.style.backgroundColor = "red";
 }
function blue()
 {
  document.body.style.backgroundColor = "blue";
 }
function yellow()
 {
  document.body.style.backgroundColor = "yellow";
 }
function green()
 {
  document.body.style.backgroundColor = "green";
 } 
function orange()
 {
  document.body.style.backgroundColor = "orange";
 }
function violet()
 {
  document.body.style.backgroundColor = "violet";
 }
function grey()
 {
  document.body.style.backgroundColor = "grey";
 }
function black()
 {
  document.body.style.backgroundColor = "black";
 }
function cream()
 {
  document.body.style.backgroundColor = "#ffe6e6";
 }
function fushia()
 {
  document.body.style.backgroundColor = "#ff00bf";
 }
function white()
 {
  document.body.style.backgroundColor = "white";
 }

<center>
 <table style="padding-top: 200px;font-size:45">
  <tr>
   <td style="background-color:#ff0040"><a href = "#" onclick = "red()">red</a></td>
   <td style="background-color:#00bfff"><a href = "#" onclick = "blue()">blue</a></td>
   <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td>
  </tr>
  <tr>
   <td style="background-color:#ffff00"><a href = "#" onclick = "yellow()">yellow</a></td>
   <td style="background-color:#80ff00"><a href = "#" onclick = "green()">green</a></td>
  </tr>
  <tr>
   <td style="background-color:#ffbf00"><a href = "#" onclick = "orange()">orange</a></td>
   <td style="background-color:#8000ff"><a href = "#" onclick = "violet()">violet</a></td>
  </tr>
  <tr>
   <td style="background-color:#808080"><a href = "#" onclick = "grey()">grey</a></td>
   <td style="background-color:#000000"><a href = "#" onclick = "black()">black</a></td>
  </tr>
  <tr>
   <td style="background-color:#ffe6e6"><a href = "#" onclick = "cream()">cream</a></td>
   <td style="background-color:#ff00bf"><a href = "#" onclick = "fushia()">fushia</a></td>
  </tr>
 </table>
 
</center>

Example output for the code above:

[1]http://i.imgur.com/lhqdFoi.jpg

This is sample output for my question

[2]http://i.imgur.com/cZw4iT3.jpg

its posted in the 2nd image but anyways the original code when u click red the background color will become red but I want to have to have the back ground color in td id:colorDisp or in specific data in table — Yeuhan Shen, Mar 16 '17 at 02:04

Fabian Horlacher · Answer 1 · 2017-03-16T02:23:50.413

You need to select the td element with id colorDisp and not the document.body. You can also pass the color to one single JavaScript function which applies it to the element.

function colorize(color)
{
       document.getElementById("colorDisp").style.background = color;
}

<body>
    <center>
        <table style="/*padding-top: 200px;*/font-size:45">
            <tr>
                <td style="background-color:#ff0040"><a href = "#" onclick = "colorize('red')">red</a></td>
                <td style="background-color:#00bfff"><a href = "#" onclick = "colorize('blue')">blue</a></td>
                <td rowspan="5" width="300px" id="colorDisp" style="background-color:black"></td>
            </tr>
            <tr>
                <td style="background-color:#ffff00"><a href = "#" onclick = "colorize('yellow')">yellow</a></td>
                <td style="background-color:#80ff00"><a href = "#" onclick = "colorize('green')">green</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffbf00"><a href = "#" onclick = "colorize('orange')">orange</a></td>
                <td style="background-color:#8000ff"><a href = "#" onclick = "colorize('violet')">violet</a></td>
            </tr>
            <tr>
                <td style="background-color:#808080"><a href = "#" onclick = "colorize('grey')">grey</a></td>
                <td style="background-color:#000000"><a href = "#" onclick = "colorize('black')">black</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffe6e6"><a href = "#" onclick = "colorize('#ffe6e6')">cream</a></td>
                <td style="background-color:#ff00bf"><a href = "#" onclick = "colorize('#ff00bf')">fushia</a></td>
            </tr>
        </table>

    </center>
</body>

score 0 · Answer 2 · answered Mar 16 '17 at 02:05

You should replace body by the the tag you want to display the color and in your code, it's getElementById('colorDisp'). Here is solution:

function red()
    {
        document.getElementById('colorDisp').style.backgroundColor = "red";
    }
function blue()
    {
        document.getElementById('colorDisp').style.backgroundColor = "blue";
    }
function yellow()
    {
        document.getElementById('colorDisp').style.backgroundColor = "yellow";
    }
function green()
    {
        document.getElementById('colorDisp').style.backgroundColor = "green";
    }   
function orange()
    {
        document.getElementById('colorDisp').style.backgroundColor = "orange";
    }
function violet()
    {
        document.getElementById('colorDisp').style.backgroundColor = "violet";
    }
function grey()
    {
        document.getElementById('colorDisp').style.backgroundColor = "grey";
    }
function black()
    {
        document.getElementById('colorDisp').style.backgroundColor = "black";
    }
function cream()
    {
        document.getElementById('colorDisp').style.backgroundColor = "#ffe6e6";
    }
function fushia()
    {
        document.getElementById('colorDisp').style.backgroundColor = "#ff00bf";
    }
function white()
    {
        document.getElementById('colorDisp').style.backgroundColor = "white";
    }

<body>
    <center>
        <table style="padding-top: 200px;font-size:45">
            <tr>
                <td style="background-color:#ff0040"><a href = "#" onclick = "red()">red</a></td>
                <td style="background-color:#00bfff"><a href = "#" onclick = "blue()">blue</a></td>
                <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td>
            </tr>
            <tr>
                <td style="background-color:#ffff00"><a href = "#" onclick = "yellow()">yellow</a></td>
                <td style="background-color:#80ff00"><a href = "#" onclick = "green()">green</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffbf00"><a href = "#" onclick = "orange()">orange</a></td>
                <td style="background-color:#8000ff"><a href = "#" onclick = "violet()">violet</a></td>
            </tr>
            <tr>
                <td style="background-color:#808080"><a href = "#" onclick = "grey()">grey</a></td>
                <td style="background-color:#000000"><a href = "#" onclick = "black()">black</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffe6e6"><a href = "#" onclick = "cream()">cream</a></td>
                <td style="background-color:#ff00bf"><a href = "#" onclick = "fushia()">fushia</a></td>
            </tr>
        </table>

    </center>

</body>

Mamun · Answer 3 · 2017-03-16T02:17:33.090

You do not need multiple function for this. Try the following:

function changeColor(color)
{
    document.getElementById('colorDisp').style.backgroundColor = color;
}

<center>
        <table style="padding-top: 10px;font-size:45">
            <tr>
                <td style="background-color:#ff0040"><a href = "#" onclick = "changeColor('red')">red</a></td>
                <td style="background-color:#00bfff"><a href = "#" onclick = "changeColor('blue')">blue</a></td>
                <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td>
            </tr>
            <tr>
                <td style="background-color:#ffff00"><a href = "#" onclick = "changeColor('yellow')">yellow</a></td>
                <td style="background-color:#80ff00"><a href = "#" onclick = "changeColor('green')">green</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffbf00"><a href = "#" onclick = "changeColor('orange')">orange</a></td>
                <td style="background-color:#8000ff"><a href = "#" onclick = "changeColor('violet')">violet</a></td>
            </tr>
            <tr>
                <td style="background-color:#808080"><a href = "#" onclick = "changeColor('grey')">grey</a></td>
                <td style="background-color:#000000"><a href = "#" onclick = "changeColor('black')">black</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffe6e6"><a href = "#" onclick = "changeColor('#ffe6e6')">cream</a></td>
                <td style="background-color:#ff00bf"><a href = "#" onclick = "changeColor('#ffe6e6')">fushia</a></td>
            </tr>
        </table>

    </center>

score 0 · Answer 4 · answered Mar 16 '17 at 02:13

You should have something like this. The code is much nicer (Here is the example http://plnkr.co/edit/FSwM1fDyzB7YgT4Or4B2?p=preview)

function updateColor(event)
{
    var color = event.parentElement.style.backgroundColor;
    document.getElementById('colorDisp').style.backgroundColor = color;
}

Html:

<table style="padding-top: 200px;font-size:45">
            <tr>
                <td style="background-color:#ff0040"><a href = "#" onclick = "updateColor(this)">red</a></td>
                <td style="background-color:#00bfff"><a href = "#" onclick = "updateColor(this)">blue</a></td>
                <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td>
            </tr>
            <tr>
                <td style="background-color:#ffff00"><a href = "#" onclick = "updateColor(this)">yellow</a></td>
                <td style="background-color:#80ff00"><a href = "#" onclick = "updateColor(this)">green</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffbf00"><a href = "#" onclick = "updateColor(this)">orange</a></td>
                <td style="background-color:#8000ff"><a href = "#" onclick = "updateColor(this)">violet</a></td>
            </tr>
            <tr>
                <td style="background-color:#808080"><a href = "#" onclick = "updateColor(this)">grey</a></td>
                <td style="background-color:#000000"><a href = "#" onclick = "updateColor(this)">black</a></td>
            </tr>
            <tr>
                <td style="background-color:#ffe6e6"><a href = "#" onclick = "updateColor(this)">cream</a></td>
                <td style="background-color:#ff00bf"><a href = "#" onclick = "updateColor(this)">fushia</a></td>
            </tr>
        </table>

Change an element's background color when clicking a different element

4 Answers4

Linked