Change An Element's Background Color When Clicking A Different Element
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.
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>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:
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>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:
<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>
Solution 4:
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>
Post a Comment for "Change An Element's Background Color When Clicking A Different Element"