Hi folks,

despite a fact that I'm learning JavaScript for some time (won't tell you how long ) I'm still quite new to this language. Since I'm trying to give my self some tasks to get better understanding of the language and do some coding I tryed to build a calculator with some themes.

There are still several things to do like for example I didn't add support to start calculations with negative numbers etc... so if you try this you'll get an error... but I want to know if my coding looks like something. While I was coding at some section of my code I got feeling like it is too complicated and that it can be done much better.

So I'm asking some more experienced user with good will and some free time if he she can take a look and give me his opinion.

Note: I mixed up some inline styling because I didn't wanted to bother with external style sheets... and uploading files. Usually i put css and scripts in external files.

Here's the code:

Code:
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>My web page</title>
		<style type="text/css">
			table {margin-bottom: 30px;}
			h5 {margin: 10px 0;}
			#text {margin-bottom: 10px;}
			.radius {border-radius: 10px;}
		</style>
		<script type="text/javascript">
			var numbers = [];
			var operations = [];

function onButtonPress(button)
{
    var display = document.getElementById('display');
    var buttonPressed = button.value;
    var res;
    var i;
   
    switch (buttonPressed)
    {
        case "+":
        case "-":
        case "*":
        case "/":
            numbers[numbers.length] = display.innerHTML;
            operations[operations.length] = buttonPressed;
            display.innerHTML = "";
            break;
        case "=":
            numbers[numbers.length] = display.innerHTML;
            i = numbers.length;
            var pass = 1;
            do
            {
                var num1 = Number(numbers[0]);
                var oper = operations[0];
               
                switch (oper)
                {
                    case "+":
                        if (pass == 1)
                            res = num1;
                        else
                            res = res + num1;
                        break;
                    case "-":
                        if (pass == 1)
                            res = num1;
                        else
                            res = res - num1;
                        break;
                    case "*":
                         if (pass == 1)
                            res = num1;
                        else
                            res = res * num1;
                        break;
                    case "/":
                         if (pass == 1)
                            res = num1;
                        else
                            res = res / num1;
                        break;
                }
                if (numbers.length > 1)
                    numbers = numbers.slice(1, numbers.length);
                if ((operations.length > 1) && (pass > 1))
                    operations = operations.slice(1, operations.length);
                i = i - 1;
                pass = pass + 1;
            }
            while (i > 0)
            display.innerHTML = res;
            break;
        case "CLR":
            numbers = [];
            operations = [];
            display.innerHTML = "";
            break;
        default:
            display.innerHTML = display.innerHTML + buttonPressed;
            break;
    }
    return;
}
function addTheme()
{
	var elem = document.getElementById('text');
	var selElem = document.getElementById('select');
	var color = elem.value;
	var index = selElem.length;
	var option;
	
	if (color == "")
		alert("Cannot add empty value!!");
	else
	{
		option = new Option(color, color);
		selElem.options[index] = option;
		elem.value = "";
		elem.focus();
	}
	return;
}
function changeTheme()
{
	var selElem = document.getElementById('select');
	var selIndex = selElem.selectedIndex;
	var optElem = selElem.options[selIndex];
	var elemToChange = document.getElementsByTagName('input');
	var pass = 1;
	
	for (var i = 0; i < elemToChange.length; i++)
	{
		if (elemToChange[i].attributes[0].name == "class")
			if (elemToChange[i].attributes[0].value == "button")
			{
				if (optElem.value == "rounded")
				{
					elemToChange[i].setAttribute('class','radius');
					elemToChange[i].style.backgroundColor = "white";
				}
				else
					elemToChange[i].style.backgroundColor = optElem.value;
			}
			else
				if (elemToChange[i].attributes[0].value == "radius")
				{
					elemToChange[i].setAttribute('class','button');
					elemToChange[i].style.backgroundColor = optElem.value;
				}
	}
}
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td id="display" colspan="5" style="border: 1px solid gray; height: 15px; padding-right: 10px; text-align: right; font-size: 12px;"></td>
			</tr>
			<tr>
				<td><input class="button" type="button" value="1" onclick="onButtonPress(this)" /></td>
				<td><input class="button" type="button" value="2" onclick="onButtonPress(this)" /></td>
				<td><input class="button" type="button" value="3" onclick="onButtonPress(this)" /></td>
				<td><input class="button" type="button" value="+" onclick="onButtonPress(this)" /></td>
				<td><input class="button" type="button" value="-" onclick="onButtonPress(this)" /></td>
			</tr>
			<tr>
				<td><input class="button" type="button" value="4" onclick="onButtonPress(this)" /></td>
				<td><input class="button" type="button" value="5" onclick="onButtonPress(this)" /></td>
				<td><input class="button" type="button" value="6" onclick="onButtonPress(this)" /></td>
				<td><input class="button" type="button" value="*" onclick="onButtonPress(this)" /></td>
				<td><input class="button" type="button" value="/" onclick="onButtonPress(this)" /></td>
			</tr>
			<tr>
				<td><input class="button" type="button" value="7" onclick="onButtonPress(this)" /></td>
				<td><input class="button" type="button" value="8" onclick="onButtonPress(this)" /></td>
				<td><input class="button" type="button" value="9" onclick="onButtonPress(this)" /></td>
				<td colspan="2"><input class="button" type="button" value="CLR" onclick="onButtonPress(this)" style="width: 63px;"/></td>
			</tr>
			<tr>
				<td><input class="button" type="button" value="0" onclick="onButtonPress(this)" /></td>
				<td colspan="4"><input class="button" type="button" value="=" onclick="onButtonPress(this)" style="width: 130px;" /></td>
			</tr>
		</table>
		<table>
			<tr>
				<td>
					<fieldset>
					<legend style="color: red;">Choose different theme</legend>
					<select id="select">
						<option value="red">Red</option>
						<option value="yellow">Yellow</option>
						<option value="orange">Orange</option>
						<option value="rounded">Rounded</option>
					</select>
					<h5>or enter hex value:</h5>
					<input id="text" type="text" /><br />
					<input type="button" value="Add" onclick="addTheme()" />
					<input type="button" value="Change" onclick="changeTheme()" />
					</fieldset>
				</td>
			</tr>
		</table>
	</body>
</html>