Menu and Variable Help

**turtleadventure** · 09-11-2012, 11:00 AM

Hello everyone, I'm new to the forum and new to programming (my first semester in school), so if this the incorrect way to post or format my questions please let me know so that I can correct it in the future. I've been searching through the forums and over the internet for tutorials on something and haven't been able to find anything relevant.
I'm designing a web page, and it needs to include three drop-down menus. The problem I'm encountering is: that when an option in each of the menus is clicked, it needs to add a number (price) to a total comprised from all three menus and a base price. For example, the first menu is the price of a computer hard drive upgrade, and that price needs to be added (along with the price from the other menus) to the base computer price. The addition happens when you click a "Total Price" button, and then gets displayed, but I'm pretty sure I can figure that part out.
If someone could explain to me how to get the menu options to generate a number, or how to reference that number so it can be added, I'd really appreciate it.

Thanks.

**N1tr0gen** · 09-11-2012, 01:07 PM

Here is a rough draft.

Code:

<script type="text/javascript">
var basePrice = 200;

function totalUp() {
	document.getElementById("total").value = parseFloat(document.getElementById("hardDriveSelect").value) + parseFloat(basePrice);
}

</script>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>test</TITLE>
</head>

<body>
	<form name="formName">
	<select name="hardDriveSelect" id="hardDriveSelect">
		<option id="WD" value="100">WD</option>
		<option id="LC" value="100">Lacie</option>
	</select>
	<br/>
	<input type="button" name="calculateTotal" id="calculateTotal" value="Calculate Total"  onclick="totalUp();">
	<br/>
	<input id=total" name="total" type="input" size="20" />
	</form>
</body>
</html>

**turtleadventure** · 09-12-2012, 07:27 AM

Thanks for your help, that's exactly what I needed the menus to do.

**N1tr0gen** · 09-12-2012, 09:51 AM

No problem. And I noticed that one of the quotes fell through the cracks on total input id. So for the sake of correcting the code:

Code:

<script type="text/javascript">
var basePrice = 200;

function totalUp() {
	document.getElementById("total").value = parseFloat(document.getElementById("hardDriveSelect").value) + parseFloat(basePrice);
}

</script>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>test</TITLE>
</head>

<body>
	<form name="formName">
	<select name="hardDriveSelect" id="hardDriveSelect">
		<option id="WD" value="100">WD</option>
		<option id="LC" value="100">Lacie</option>
	</select>
	<br/>
	<input type="button" name="calculateTotal" id="calculateTotal" value="Calculate Total"  onclick="totalUp();">
	<br/>
	<input id="total" name="total" type="input" size="20" />
	</form>
</body>
</html>

**turtleadventure** · 09-12-2012, 01:03 PM

Yeah it took me a minute to figure that one out, but I wasn't sure how to put the revised code in a post. Thanks again.

Thread: Menu and Variable Help

Thread Tools

Display

Menu and Variable Help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions