javascript - too many decimals + styling not visible on website -
my script below displays many decimal points in return value
also, when posted code onto website, did not display text styling added
can please tell me im missing?
thanks
<html> <head> <style> body {color:rgb(128,128,128);} p.3 {color:rgb(128,128,128);} p.3 {font-size:20px;} </style> <script type = "text/javascript"> function convert() { var amount=document.getelementbyid('amount'); var currency=document.getelementbyid('currency'); var converted=document.getelementbyid('converted'); var choice=document.getelementbyid('choice'); var aed=1; var us=0.27; var qr=0.99; var sr=1.02; var kd=0.0778; var bd=0.102; switch(document.converter.currency.value) { case "us dollars" : document.converter.converted.value=us*document.converter.amount.value; document.converter.choice.value=document.converter.currency.value; break; case "qatar riyal": document.converter.converted.value=qr*document.converter.amount.value; document.converter.choice.value=document.converter.currency.value; break; case "saudi riyal": document.converter.converted.value=sr*document.converter.amount.value; document.converter.choice.value=document.converter.currency.value; break; case "kuwaiti dinar": document.converter.converted.value=kd*document.converter.amount.value; document.converter.choice.value=document.converter.currency.value; break; case "bahrain dinar": document.converter.converted.value=bd*document.converter.amount.value; document.converter.choice.value=document.converter.currency.value; break; } } </script> </head> <body> <div id="divwrapper"> <form name="converter" id="converter"> <br/> enter amount in uae dirhams <input name="amount"type="text" id="amount" size="3" /> <br /><br /> please select currency <select name="currency" id="currency"> <option>select one</option> <option value="us dollars">us dollars</option> <option value="qatar riyal">qatar riyal</option> <option value="saudi riyal">saudi riyal</option> <option value="kuwaiti dinar">kuwaiti dinar</option> <option value="bahrain dinar">bahrain dinar</option> </select> <input type="button" name="convt" id="convt" onclick="convert()" value="convert" /> <br /><br /> <p class="3"> amount is: <input name="converted" type="text" id="converted" style="border:0px" style="color:rgb(255,0,102)" style="text-align:center" style="font-size:22px" value="" size="5"/> in <input name="choice" type="text" id="choice" style="border:0px" style="color:rgb(255,0,102)" style="font-size:22px" style="text-align:center" value="" size="10"> </p> <br /><br /> </form> </div> </body> </html>
regarding javascript/decimals
assuming want things rounded 2 decimal places, should employ .tofixed()
function, tschulze mentioned.
here's how incorporate current structure (you'll have similar things each of case statements):
document.converter.converted.value=(bd*document.converter.amount.value).tofixed(2); document.converter.choice.value=document.converter.currency.value;
regarding styling
the issues having styling due having multiple style attributes. correct way apply multiple styles have of different aspects setting inside 1 style attribute, separated semicolons:
<input name="converted" type="text" id="converted" style="border:0; color:rgb(255,0,102); text-align:center; font-size:22px;" value="" size="5"/>
additional notes
it seems simplify code switching structure have single set multiplier , choose apply case fitting:
function convert() { var amount=document.getelementbyid('amount'); var currency=document.getelementbyid('currency'); var converted=document.getelementbyid('converted'); var choice=document.getelementbyid('choice'); var multiplier=1; switch(document.converter.currency.value) { case "us dollars" : multiplier=0.27; break; case "qatar riyal": multiplier=0.99; break; case "saudi riyal": multiplier=1.02; break; case "kuwaiti dinar": multiplier=0.0778; break; case "bahrain dinar": multiplier=0.102; break; } document.converter.converted.value=(multiplier*document.converter.amount.value).tofixed(2); document.converter.choice.value=document.converter.currency.value; }