Javascrip/css

JavaScript
1

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?

2

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; }