hello,
I need some help. I created a table that has some drop down boxes and based on the user selection it will show the text on the bottom,
the plain drop down box has (nomal/bold/italic/bold-italic)
the large drop down box has (large/medium/small)
can someone please guide me or provide me a little demo on how to get this working?
Hello!
<form action="#">
<div>
<label for="text">Text</label>
<input id="text" name="text" type="text" />
<label for="style">Style</label>
<select id="style" name="style">
<option value="n">normal</option>
<option value="b">bold</option>
<option value="i">italic</option>
<option value="b i">bold-italic</option>
</select>
<label for="size">Size</label>
<select id="size" name="size">
<option value="l">large</option>
<option value="m">medium</option>
<option value="s">small</option>
</select>
</div>
</form>
<div id="result"></div>
<script type="text/javascript">
(function () {
var text = document.getElementById("text"),
style = document.getElementById("style"),
size = document.getElementById("size"),
result = document.getElementById("result");
if (!text || !style || !size || !result) {
return;
}
function updateText() {
result.innerHTML = text.value;
}
function updateTextStyles() {
result.className = style.options[style.selectedIndex].value + " " + size.options[size.selectedIndex].value;
}
updateText();
updateTextStyles();
text.onkeyup = updateText;
text.onchange = updateText;
style.onchange = updateTextStyles;
size.onchange = updateTextStyles;
}());
</script>
and
.n { font-style: normal; font-weight: normal; }
.b { font-weight: bold; }
.i { font-style: italic; }
.l { font-size: 16px; }
.m { font-size: 14px; }
.s { font-size: 12px; }