www.webdeveloper.com
Results 1 to 5 of 5

Thread: Menu and Variable Help

  1. #1
    Join Date
    Sep 2012
    Location
    Melbourne
    Posts
    3

    Menu and Variable Help

    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.

  2. #2
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    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>

  3. #3
    Join Date
    Sep 2012
    Location
    Melbourne
    Posts
    3
    Thanks for your help, that's exactly what I needed the menus to do.

  4. #4
    Join Date
    Sep 2012
    Location
    Toronto
    Posts
    16
    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>

  5. #5
    Join Date
    Sep 2012
    Location
    Melbourne
    Posts
    3
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles