Skip to content Skip to sidebar Skip to footer
Home / Javascript

Change An Element's Background Color When Clicking A Different Element

Post a Comment
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: Example output for the

Solution 1:

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.

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

Solution 2:

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:

functionred()
    {
        document.getElementById('colorDisp').style.backgroundColor = "red";
    }
functionblue()
    {
        document.getElementById('colorDisp').style.backgroundColor = "blue";
    }
functionyellow()
    {
        document.getElementById('colorDisp').style.backgroundColor = "yellow";
    }
functiongreen()
    {
        document.getElementById('colorDisp').style.backgroundColor = "green";
    }   
functionorange()
    {
        document.getElementById('colorDisp').style.backgroundColor = "orange";
    }
functionviolet()
    {
        document.getElementById('colorDisp').style.backgroundColor = "violet";
    }
functiongrey()
    {
        document.getElementById('colorDisp').style.backgroundColor = "grey";
    }
functionblack()
    {
        document.getElementById('colorDisp').style.backgroundColor = "black";
    }
functioncream()
    {
        document.getElementById('colorDisp').style.backgroundColor = "#ffe6e6";
    }
functionfushia()
    {
        document.getElementById('colorDisp').style.backgroundColor = "#ff00bf";
    }
functionwhite()
    {
        document.getElementById('colorDisp').style.backgroundColor = "white";
    }
<body><center><tablestyle="padding-top: 200px;font-size:45"><tr><tdstyle="background-color:#ff0040"><ahref = "#"onclick = "red()">red</a></td><tdstyle="background-color:#00bfff"><ahref = "#"onclick = "blue()">blue</a></td><tdrowspan="5"width="300px"id="colorDisp"style="background-color:black"></td></tr><tr><tdstyle="background-color:#ffff00"><ahref = "#"onclick = "yellow()">yellow</a></td><tdstyle="background-color:#80ff00"><ahref = "#"onclick = "green()">green</a></td></tr><tr><tdstyle="background-color:#ffbf00"><ahref = "#"onclick = "orange()">orange</a></td><tdstyle="background-color:#8000ff"><ahref = "#"onclick = "violet()">violet</a></td></tr><tr><tdstyle="background-color:#808080"><ahref = "#"onclick = "grey()">grey</a></td><tdstyle="background-color:#000000"><ahref = "#"onclick = "black()">black</a></td></tr><tr><tdstyle="background-color:#ffe6e6"><ahref = "#"onclick = "cream()">cream</a></td><tdstyle="background-color:#ff00bf"><ahref = "#"onclick = "fushia()">fushia</a></td></tr></table></center></body>

Solution 3:

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:

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

Solution 4:

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

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

You may like these posts

Post a Comment for "Change An Element's Background Color When Clicking A Different Element"