Preview text

I made this code so that when a user enters a colour the colour of the "preview" text changes

Colour: <input type="text" size="10" onkeyup="colourpreview.color=this.value" onchange="colourpreview.color=this.value">
<font id="colourpreview">Preview</font>


It works fine, however when i want to do the same thing with elements that use style, for example the highlight colour:

<span style="background-color: colour">ss</span>

Can you write me the script and change it so that it canges the background colour of the Preview text?

Preferably do it like this:

<span id="bgcolourid"><font id="colourpreview">Preview</font><span>

ALso is it possible for you to make the codes so that they work with dropdown boxes??

<option>Colour here</option>

Here's one possibility

<script type="text/javascript">

function changeColor(v){

elements=document.getElementsByTagName("*")

for(var i=0;i<elements.length;i++){

if(elements[i].className=="newcolor"){
elements[i].style.color=v

}

}

}


</script>
Colour: <input type="text" size="10" onchange="changeColor(this.value)">
<div class="newcolor">Preview</div>

<span class="newcolor">ss</span>

Thanks a lot but i need it to change the background colour (fill) of the "preview" text

Edit: thanks i edited it my self, works now

Know how i can now do it with B/I/U?

Use

font-weight:bold

font-style:italic

text-decoration:underline


Scriptwise

fontWeight="bold"

fontStyle="italic"

textDecoration="underline"

thanks, i know about the css stuff but when i do it in javascript it never works, Can you do it for me? Also how can i make it work in dropdown boxes?


thanks a lot

When referencing css in Javascript you have to use camelCasing
Here's a few examples

<script type="text/javascript">

function changeColor(v){

elements=document.getElementsByTagName("*")

for(var i=0;i<elements.length;i++){

if(elements[i].className=="newcolor"){
elements[i].style.color=v
}

if(elements[i].className=="newbold"){
elements[i].style.fontWeight="bold"
}

if(elements[i].className=="newunderline"){
elements[i].style.textDecoration="underline"
}

if(elements[i].className=="newitalic"){
elements[i].style.fontStyle="italic"
}

if(elements[i].className=="newbackground"){
elements[i].style.backgroundColor=v
}

}

}


</script>
Colour: <input type="text" size="10" onchange="changeColor(this.value)">
<div class="newcolor">Preview</div>

<span class="newcolor">ss</span><BR>

<div class="newbold">BOLD</div>
<div class="newunderline">UNDERLINE</div>
<div class="newitalic">ITALIC</div>

<select>
<option class="newcolor">Option 1</option>
<option class="newbackground">Option 2</option>

</select>



With the select box you are limited as to what you can use