Javascript help (noob sry)

Discussion in 'Programming & Software Development' started by Leigh M, Aug 30, 2012.

  1. Leigh M

    Leigh M Member

    Joined:
    Jan 13, 2010
    Messages:
    2,449
    Trying to make a little currency converter table on a html page (nothing legit just to play). Kinda lost at the moment making the connection between the dropdown boxes/calculations.

    I have the first dropdown which will just be AUD
    Code:
    [SIZE="2"]<form action="" id="fromcurrency">
    <select>
    <option value=“AU”>AUD</option>
    </select>
    </form>[/SIZE]
    Second dropdown
    Code:
    [SIZE="2"]<form action="" id="tocurrency">
    <select id='toC'>
    <option value=“Select currency”>Select Currency</option>
    <option value=“US”>US $</option>
    <option value=“UK”>UK Pound</option>
    <option value=“HK”>Hong Kong $</option>
    <option value=“SP”>Singapore $</option>
    <option value=“JP”>Japanese Yen</option>
    <option value=“NZ”>NZ $</option>
    </select>
    </form>[/SIZE]
    and the values
    Code:
    [SIZE="2"]var currency_value = new Array();
    currency_value["US"]=1.054;
    currency_value["UK"]=0.672;
    currency_value["HK"]=8.170;
    currency_value["SP"]=1.310;
    currency_value["JP"]=82.48;
    currency_value["NZ"]=1.300;
    currency_value["AU"]=1.00;[/SIZE]
    What would be the best way to output it to a third cell in the table?

    If I am already completely wrong with what I've already done please let me know.
     
  2. cyclobs

    cyclobs Member

    Joined:
    Nov 12, 2010
    Messages:
    561
    Location:
    Wee Waa, NSW
    assuming you're doing them with just JS it's pretty easy.

    first off make the new box in your html with it's own name

    Code:
    <input id="converted_output" type="text" readonly="readonly" value="" />
    
    then when you finish your JS conversion how ever you do that, output the results into the text box.

    Code:
    document.getElementById("converted_output").value = output;
    
    'output' is the variable of your results which could be produced for example:

    Code:
    var cal = input * currency_value["US"];
    
    if (currency == "US") {
      var output = "$" + cal;
    }
    
    Might not be 100% but it gives you the idea

    edit: Since i'm bored i might make my own version :)
     
    Last edited: Aug 30, 2012
  3. OP
    OP
    Leigh M

    Leigh M Member

    Joined:
    Jan 13, 2010
    Messages:
    2,449
    Thanks for the help still going a little over my head tho heh.

    I've tried expanding the From Currency to all others and assign base value of 1.00 but how would I link that to the fromcurrency form id?
    Looking at what I have now there's nothing that shows difference between the two arrays

    Code:
    var base_value = new Array();
    base_value["US"]=1.00;
    base_value["UK"]=1.00;
    base_value["HK"]=1.00;
    base_value["SP"]=1.00;
    base_value["JP"]=1.00;
    base_value["NZ"]=1.00;
    base_value["AU"]=1.00;
    This is what I've got so far.. not much

    http://shabutie.com/files/random/page2.txt
     
  4. cyclobs

    cyclobs Member

    Joined:
    Nov 12, 2010
    Messages:
    561
    Location:
    Wee Waa, NSW
    not quite sure what you're asking but.. The best and easiest way to make it work would be to have it all under the one form then you can get the value with:

    Code:
    var fromcur = document.getElementById("fromcurrency").value;
    of cause that means you need the <select> element to have the ID not the form
     
    Last edited: Aug 30, 2012
  5. OP
    OP
    Leigh M

    Leigh M Member

    Joined:
    Jan 13, 2010
    Messages:
    2,449
    sorry not sure if I'm explaining it right.

    [​IMG]

    I want to have the from currency dropdown all have a value of 1.00 , and the to currency dropdown will all have different values, then calculated into the end box.
     
  6. cyclobs

    cyclobs Member

    Joined:
    Nov 12, 2010
    Messages:
    561
    Location:
    Wee Waa, NSW
    wait... wouldn't you want the user to be able to input a value they want converted to another currency?

    or do you want to convert once currency to another? (have not worked out how to do that yet..)
     
  7. OP
    OP
    Leigh M

    Leigh M Member

    Joined:
    Jan 13, 2010
    Messages:
    2,449
    I've just been starting off on the 1:X (aud > other) for now but that is a good point they should be able to input how much but I'm not sure if I'd be able to do it.
     
  8. Remote Man

    Remote Man Member

    Joined:
    Jul 23, 2002
    Messages:
    1,035
    Location:
    Melbourne.vic.au
    Here doesn't do everything you want but the rest is just easy programming/maths stuff and not JS in particular.

    You'll need to multi-dimension the array to add the $ and £ etc.
    You'll also need to reorganize how the maths works as at the moment is doesn't factor in US to EURO etc, I'd use a base currency and have everything multiply off it.
     
  9. cyclobs

    cyclobs Member

    Joined:
    Nov 12, 2010
    Messages:
    561
    Location:
    Wee Waa, NSW
    for the heck of it i made up a very basic converter just to give you a bit of an idea on doing it..

    index.htm
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title>Currency Converter</title>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <body>
    <script type="text/javascript" src="convert.js"></script>
    	<div id="Main">
    		<h1><u>Currency Converter</u></h1>
    		
    		<p style="margin-top: 10%;">Select what currency you wish to convert to and type in the ammount, Hit select for magical stuff!</p>
    		<form id="form_currency">
    			<fieldset style="border: 0;">
    					<h2>From</h2> 
    					$AUD<br />
    					<input id="fromcur_value" type="text" value="1" />
    					
    					<h2>To</h2>
    					<select id="tocur">
    						<option value="US">US</option>
    						<option value="UK">UK</option>
    						<option value="HK">HK</option>
    						<option value="SP">SP</option>
    						<option value="JP">JP</option>
    						<option value="NZ">NZ</option>
    						<option value="AU">AU</option>
    					</select>
    					<br /><br />
    					<input type="button" value="Convert!" onclick="convert()" />
    				
    					<h3>Results</h3>
    					<input id="output" type="text" readonly="readonly" value="" />
    			</fieldset>
    		</form>
    	</div>
    </body>
    </html>
    
    style.css
    Code:
    /* styles.css - For all stylings 
    	Written by: Cyclobs
    */
    body {
    	font-family: "Calibri";
    	background-color: lightblue;
    }
    
    #Main {
    	width: 60%;
    	text-align: center;
    	margin-top: 10%;
    	margin-left: auto;
    	margin-right: auto;
    	border: 2px dashed black;
    	border-radius: 3px;
    }
    
    #Main h1 {
    	font-size: 30pt;
    }
    
    #form_currency {
    	text-align: left;
    }
    
    #output {
    	background-color: lightgrey;
    }
    
    convert.js
    Code:
    // Javascript function for converting currencys
    function addCommas(nStr) // Just for fancy stuff - Not my code: ref (http://www.mredkj.com/javascript/nfbasic.html)
    {
    	nStr += '';
    	x = nStr.split('.');
    	x1 = x[0];
    	x2 = x.length > 1 ? '.' + x[1] : '';
    	var rgx = /(\d+)(\d{3})/;
    	while (rgx.test(x1)) {
    		x1 = x1.replace(rgx, '$1' + ',' + '$2');
    	}
    	return x1 + x2;
    }
    
    function convert() {
    	// Currency Values
    	var currency_value = new Array();
    		currency_value["US"] = 1.054;
    		currency_value["UK"] = 0.672;
    		currency_value["HK"] = 8.170;
    		currency_value["SP"] = 1.310;
    		currency_value["JP"] = 82.48;
    		currency_value["NZ"] = 1.300;
    		currency_value["AU"] = 1.00;
    	
    	// Get form details
    	//var fromcur = document.getElementById("fromcur").value();
    	var from_val = document.getElementById("fromcur_value").value;
    	var tocur = document.getElementById("tocur").value;
    	
    
    	// Usually here we would validate the input to make sure it's an number but.. cbf today :D
    	
    	// Convert to currency
    	var convert_value;
    	var commas;
    	var output;
    	
    	if (tocur == "US") {
    		convert_value = from_val * currency_value["US"];
    		commas = addCommas(convert_value);
    		output = "$" + commas;
    	}
    	else if (tocur == "UK") {
    		convert_value = from_val * currency_value["UK"];
    		commas = addCommas(convert_value);
    		output = "$" + commas;
    	}
    	else if (tocur == "HK") {
    		convert_value = from_val * currency_value["HK"];
    		commas = addCommas(convert_value);
    		output = "$" + commas;
    	}
    	else if (tocur == "SP") {
    		convert_value = from_val * currency_value["SP"];
    		commas = addCommas(convert_value);
    		output = "$" + commas;
    	}
    	else if (tocur == "SP") {
    		convert_value = from_val * currency_value["SP"];
    		commas = addCommas(output);
    		commas = "$" + convert_value;
    	}
    	else if (tocur == "JP") {
    		convert_value = from_val * currency_value["JP"];
    		commas = addCommas(convert_value);
    		output = "$" + commas;
    	}
    	else if (tocur == "NZ") {
    		convert_value = from_val * currency_value["NZ"];
    		commas = addCommas(convert_value);
    		output = "$" + commas;
    	}
    	else if (tocur == "AU") {
    		convert_value = from_val * currency_value["UK"];
    		commas = addCommas(convert_value);
    		output = "$" + commas;
    	}
    	else { //no match
    		document.getElementById("output").value = "error!!";
    		return (1); // Had a problem
    	}
    	
    	// Display the results into the output box
    	document.getElementById("output").value = output;
    	return (0) // Success!
    }
    
    If you want to see it work just chuck the 3 files into an directory and open index.hrml
     
  10. OP
    OP
    Leigh M

    Leigh M Member

    Joined:
    Jan 13, 2010
    Messages:
    2,449
    wow thanks, I'm having a look through now.

    Some parts starting to make a little sense the others going straight over my head lol
     
    Last edited: Aug 30, 2012
  11. damox

    damox Member

    Joined:
    Aug 22, 2011
    Messages:
    304
    Those else ifs :tongue:
    Code:
    var [B]tocur[/B] = document.getElementById("tocur").value;
    
    convert_value = from_val * currency_value[[B]tocur[/B]];
    		commas = addCommas(convert_value);
    		output = "$" + commas;
    
     
  12. cyclobs

    cyclobs Member

    Joined:
    Nov 12, 2010
    Messages:
    561
    Location:
    Wee Waa, NSW
    lol i was in a hurry i didn't think of that :lol:
     
  13. OP
    OP
    Leigh M

    Leigh M Member

    Joined:
    Jan 13, 2010
    Messages:
    2,449

    What does that do?
     
  14. cyclobs

    cyclobs Member

    Joined:
    Nov 12, 2010
    Messages:
    561
    Location:
    Wee Waa, NSW
    exact same thing as my code does except it's done in 1 line. (talking about the if, if else statements)
     
  15. OP
    OP
    Leigh M

    Leigh M Member

    Joined:
    Jan 13, 2010
    Messages:
    2,449
    Ah yeah thanks heh, so much made to so little.
     
  16. asher001

    asher001 Member

    Joined:
    Nov 6, 2010
    Messages:
    311
    I hate to be the one to say this, but the advice so far hasn't been good.

    JavaScript doesn't have associative arrays. If you want to do associative, use objects.

    Additionally, putting stuff like onclick in the HTML is terrible practice. It was commonplace 10 years ago but really isn't the way to do things. The same goes for putting style attributes in your tags too btw.

    Here's an example of the way you should be doing it.

    HTML:
    Code:
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Currency Converter</title>
    
    	<section>
    		<form>
    			<label for="inputVal">AU$</label>
    			<input id="inputVal" type="text">
    			<br>
    			
    			<label for="foreign">To:</label>
    			<select id="foreign">
    				<option>US
    				<option>UK
    				<option>HK
    				<option>SP
    				<option>JP
    				<option>NZ
    				<option>AU
    			</select>
    			<p>
    				Result: <span id="result"></span>
    			</p>
    		</form>
    	</section>
    
    <script src="convert.js"></script>
    
    convert.js
    Code:
    (function x() {
    
    	var exchange = {
    		US: 1.054,
    		UK: 0.672,
    		HK: 8.170,
    		SP: 1.310,
    		JP: 82.48,
    		NZ: 1.300,
    		AU: 1.00
    	};
    
    	document.getElementById('inputVal').addEventListener('keyup', convert);
    	document.getElementById('foreign').addEventListener('change', convert);
    
    	function convert() {
    		var input = +document.getElementById('inputVal').value;
    		if (!isNaN(input)) {
    			document.getElementById('result').innerHTML = (input * exchange[document.getElementById('foreign').value]).toFixed(2);
    		}
    	}
    
    }());
    
    Just in case you're wondering about the JS... I used two event handlers instead of a single one on the form because I need 'change' to detect the select menu but change only works on a text input after blur, so I used keyup for that.

    The convert function checks that a number has been input, then multiplies it by the required exchange rate before writing the output to the results span.

    I've wrapped the lot in a function just so that the global object isn't getting hammered with stuff, but this of course is optional.
     
    Last edited: Aug 31, 2012
  17. OP
    OP
    Leigh M

    Leigh M Member

    Joined:
    Jan 13, 2010
    Messages:
    2,449
    Thanks for contributing, great stuff to think about and look over. My knowledge of JS is basically none, would like to know more.

    Just a quick question, what program do you use to write up your code?
     
    Last edited: Aug 31, 2012
  18. asher001

    asher001 Member

    Joined:
    Nov 6, 2010
    Messages:
    311
    I use Sublime Text 2. It is AMAZING.

    JS is a cool language, lots of crap in it, but plenty of really good parts too. The biggest error people make with JS is approaching it like it is just another C-family language because it shares the syntax. It is not another C-family language, it is really different.
     
  19. OP
    OP
    Leigh M

    Leigh M Member

    Joined:
    Jan 13, 2010
    Messages:
    2,449
    Ah kk will give it a try, I only really know basic html, trying to expand a little
     
  20. cyclobs

    cyclobs Member

    Joined:
    Nov 12, 2010
    Messages:
    561
    Location:
    Wee Waa, NSW
    Good to hear!

    My JS is pretty basic, but i disagree with you about the styling in tags and events stuff.

    But really it's down to personal preference on how you do things.
     

Share This Page

Advertisement: