Need help live updating css

[wee493]

I have a site where users can set their own custom css styles. I would like for the page to update live based on the users color selection. For example, if a user selects a color from the color picker for the background then the background color would change to that color. I know this is possiable, it's just that I don't know any javascript just php.

 

Here is what I have

<script type="text/javascript">
function updatebg(){
var myTextField = document.getElementById('branding');
var color =  document.getElementById('input1').value;
myTextField.setAttribute("style", "background-color: ' . color . '");
}
				</script>


<input type="text" name="input1" id="input1" onchange="updatebg()">

 

I've mashed this together after some searching, but it does not work. can anybody help me with this?

[haku]

var color =  document.getElementById('input1').value;
myTextField.css.backgroundColor = color

 

Although I'm not entirely sure that your first line is going to give you the value of the input div.

[cbolson]

Hi,

Rather than this line:

myTextField.setAttribute("style", "background-color: ' . color . '");

 

Have you tried this:

myTextField.style.backgroundColor = color;

 

Chris

 

[haku]

Oops! What he said. 'css' isn't a valid javascript method that I used in my code.

[wee493]

Thas for your hel, I got it working using the following code

 

<script>
					function updatebg(){
						var myTextField = document.getElementById('branding');
						var color = document.getElementById('input1').value;
						myTextField.style.backgroundColor = color;
					}
</script>

 

How do I make the thread "Solved"?