i have a small problem.
I’m learning Javascript and I decided to make a currency converter but, my page keeps refreshing after the data is being displayed.
Could anyone help me figure out why it’s acting this way? Thanks
website : http://nonlocalhost.uphero.com/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
* {font-size:13px;font-family:arial;background-color:black;color:white;padding:0;margin:0;}
#wrapper {width:640px;margin:0px auto;}
input {color:lime;width:150px;height:22px;}
#money_to_convert, label:nth-child(3) {position:relative;top:100px;right:95px;}
#my_currency {width:53px;height:22px;position:relative;top:100px;left:232px;}
#converted_input, label:nth-child(5) {position:relative;top:134px;right:298px;}
#convert_currency {width:53px;height:22px;position:relative;top:134px;left:175px;}
#submit_button {width:52px;height:25px;position:relative;top:117px;right:230px;}
</style>
<script type="text/javascript">
function output_value() {
var my_input = Number(document.getElementsByName("user_input")[0].value);
var my_output;
var my_currency = document.convertions.currency_to_convert.value;
var convert_to = document.convertions.convert_currency_to.value;
if(my_currency == "USD"){
if(convert_to == "CAD"){
my_output = my_input * 0.975;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "EUR"){
my_output = my_input * 0.775;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "GBP"){
my_output = my_input * 0.620;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "AUD"){
my_output = my_input * 0.956;
document.getElementsByName("convertion_output")[0].value = my_output;
}else{
alert("You can't convert the same currency.");
}
}else if(my_currency == "CAD"){
if(convert_to == "USD"){
my_output = my_input * 1.025;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "EUR"){
my_output = my_input * 0.795;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "GBP"){
my_output = my_input * 0.636;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "AUD"){
my_output = my_input * 0.980;
document.getElementsByName("convertion_output")[0].value = my_output;
}else{
alert("You can't convert the same currency.");
}
}else if(my_currency == "EUR"){
if(convert_to == "USD"){
my_output = my_input * 1.289;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "CAD"){
my_output = my_input * 1.257;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "GBP"){
my_output = my_input * 0.800;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "AUD"){
my_output = my_input * 1.233;
document.getElementsByName("convertion_output")[0].value = my_output;
}else{
alert("You can't convert the same currency.");
}
}else if(my_currency == "GBP"){
if(convert_to == "USD"){
my_output = my_input * 1.610;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "EUR"){
my_output = my_input * 1.249;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "CAD"){
my_output = my_input * 1.571;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "AUD"){
my_output = my_input * 1.541;
document.getElementsByName("convertion_output")[0].value = my_output;
}else{
alert("You can't convert the same currency.");
}
}else if(my_currency == "AUD"){
if(convert_to == "USD"){
my_output = my_input * 1.045;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "EUR"){
my_output = my_input * 0.810;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "GBP"){
my_output = my_input * 0.648;
document.getElementsByName("convertion_output")[0].value = my_output;
}else if(convert_to == "CAD"){
my_output = my_input * 1.019;
document.getElementsByName("convertion_output")[0].value = my_output;
}else{
alert("You can't convert the same currency.");
}
}else{
alert("Fatal Error, refresh the page.");
}
}
</script>
</head>
<body>
<div id="wrapper">
<form name="convertions">
<select name="currency_to_convert" id="my_currency">
<option value="USD" selected>USD</option>
<option value="CAD">CAD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="AUD">AUD</option>
</select>
<select name="convert_currency_to" id="convert_currency">
<option value="USD">USD</option>
<option value="CAD" selected>CAD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="AUD">AUD</option>
</select>
<label for="user_input">Amount:</label>
<input type="text" name="user_input" id="money_to_convert" />
<label for="convertion_output">Result:</label>
<input type="text" name="convertion_output" id="converted_input" disabled="disabled" />
<button onclick="output_value()" id="submit_button">Submit</button>
</form>
</div>
</body>
</html>
The default behavior of button is act like a submit button if it’s inside a form. If you add type=’button’, it stops acting like a submit button
You can also just return false from the handler (like you could with
<input type="submit">) to prevent the default behavior.Not that you don’t really need a form here, since you’re not submitting it. Removing the form also fixes your problem.
See How to prevent buttons from submitting forms