Change text colour with button

[Nodral]

Hi

 

I'm creating a control panel which allows the user to input some text and then play around with the colours and fonts whilst seeing it in a preview panel.  My Javascript is not that strong and I'm struggling to get the input color.

 

 

CSS

  #colour1{
  background-color:red;
  }

 

HTML controls

<td class="colours"><button id="colour1" onClick="changeColor('colour1');"></button></td>
<td  rowspan="4" width="60%"><span id="preview" >Hello World</span></td>

 

js Function

 

function changeColor(input){

var element  =document.getElementById(input);

var elementColor  = document.getElementById(input).style.backgroundColor;

document.getElementById('preview').style.color=document.getElementById(input).style.backgroundColor;


}

 

This does absolutely nothing, how can I make it work?

 

[Adam]

You're passing the ID of your button to the function, which then tries to set the new colour as the value property of the object with that ID (your button), which is undefined. In other words you're trying to set the colour to something undefined. Where is the new colour value stored/input?

[nogray]

You can't access the css properties using obj.style.prop unless it's an inline style. You would need to use currentStyle