Hi,
Instead of having three different function you could use single function to do the same,
HTML part:
<input type="label" id="txtContent" value="RK"/>
<input id="chkbold" type="checkbox" onclick="applyStyle('b',this.id)">Bold
<input id="chkItalic" type="checkbox" onclick="applyStyle('i',this.id)">Italic
<input id="chkUnderline" type="checkbox" onclick="applyStyle('u',this.id)">Underline
Javascript function:
function applyStyle(styleOptn,chkbxID)
{
var e = document.getElementById(chkbxID);
var src= document.getElementById('txtContent');
src.style.fontWeight = (e.checked && styleOptn == 'b') ? "bold": "";
src.style.fontStyle = (e.checked && styleOptn == 'i') ? "italic": "";
src.style.textDecoration = (e.checked && styleOptn == 'u') ? "underline": "";
}
Updated solution as per your requirement:
<select id="selectFontFamily" onchange ="changeFontFamily();">
<option selected="selected">Select one.....</option>
<option>Calibri</option>
<option>Cambria</option>
<option>Verdana</option>
<option>Times New Roman</option>
</select>
Javascript function:
function changeFontFamily()
{
var e = document.getElementById("selectFontFamily");
var selectedValue = e.options[e.selectedIndex].value;
var src= document.getElementById('txtContent');
src.style.fontFamily = selectedValue;
}
Clean and sweet ;-), you could test it in this site
http://jsbin.com/jotafaqu/5/[
^]
Hope this helps you a bit.
Regards,
RK