Printable View
I've written a very basic function for practice, but I can't get it to work with form elements. I'm always getting "undefined" instead of values.
Could anyone please help?
Here's my file on Dropbox.
I am a novice in Javascript and beginner in programming in general, so please make your explanation as detailed as possible :)
Code:<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Information units converter</title>
<style>
input{text-align:center;}
.wrap {
width: 500px;
margin: 0 auto;
}
.heading {
font-family: Georgia;
}
.subheading {
color: gray;
font-family: Helvetica;
font-size: 10pt;
margin: -20px 0 25px 125px;
width: 165px;
}
.inputs {
margin-left: 40px;
}
.bttn {
margin-left: 80px;
width: 150px;
}
.form {
width: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrap">
<h1 class="heading">
Internet speed converter
</h1>
<h3 class="subheading">- How much is it in Megs?</h3>
<form class="form" name="units" method="" id="form">
<div class="inputs">
<input type="text" name="fromValue" id="fromValue">
<select name="fromOption" id="fromOption">
<option value="">From</option>
<option name="Kilobits" value="Kilobits">Kilobits</option>
<option name="Megabits" value="Megabits">Megabits</option>
</select>
<br />
<input type="text" name="toValue" id="toValue" readonly="readonly">
<select id="toOption" name="toOption">
<option value="">To</option>
<option name="Kilobytes" value="Kilobytes">Kilobytes</option>
<option name="Megabytes" value="Megabytes">Megabytes</option>
</select>
</div>
<br />
<input class="bttn" type="button" value="Convert" onclick="converter(this.form)">
</form>
</div>
<script type="text/javascript">
function converter(form){
var result,
from_val=new Number(form.fromValue.value),
from_opt=form.fromOption.value,
to_opt=form.toOption.value;
switch(from_opt){
case "Kilobits":
if(to_opt == "Megabytes"){result=parseInt(from_val * Math.floor(0.000122070312));}
if(to_opt == "Kilobytes"){result=parseInt(from_val * 0.125);}
break;
case "Megabits":
if(to_opt == "Kilobytes"){result=parseInt(from_val / 128);}
if(to_opt == "Megabytes"){result=parseInt(from_val * 0.125);}
break;
}
if(!result){alert('The Dark side wins!');form.reset();form.fromValue.focus();}
else{form.toValue.value=result;}
};
</script>
</body>
</html>
