為替換算アプリ


スポンサーリンク

為替レートを設定して、設定した値を計算し、為替を出力するjavascript(わかりづらい)

JavaScriptは
getElementByIdっていうのとonClickを使いこなすのがまず初めの一歩になりそう。
Javaには無い概念だから。
手を動かしているうちにわかってくると思う。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>為替計算</title>
<script>

function exchange(exchangeType){
	var rate = document.getElementById("rate").value;
	var inMoney = document.getElementById("inMoney").value;
	
	var exchangeMoney;
	var currency;
	
	if(exchangeType == "toYen"){
		exchangeMoney = inMoney * rate;
		currency = "円";
	} else {
		exchangeMoney = inMoney / rate;
		currency = "ドル";
	}
	
	exchangeMoney = Math.round(exchangeMoney * 100) / 100;
	
	if(isNaN(exchangeMoney)) {
		alert("数値を入力してください");
		exchangeMoney = "---";
	}
	
	if (rate <= 0) {
		alert("為替レートには0より大きな数値を入力してください");
		exchangeMoney = "---";
	}
	
	var outMoneyElement = document.getElementById("outMoney");
	outMoneyElement.innerHTML = exchangeMoney + currency;
}
</script>

<style>
form {
	font-family:"メイリオ";
	line-height:200%;
	background-color:#CCCCCC;
	border:solid #999999 1px;
	color:#000000;
	width:300px;
	padding:10px;
}
#outMoney {
	font-size:24pt;
}
</style>
</head>
<body>
<form>
	1ドル=
	<input type="number" step="0.1" id="rate" value="77.8" size="12">円
	<img src="worldmap.jpg">
	<br>
	両替する金額:
	<input type="number" id="inMoney" value="100" size="12">
	<br>
	<input type="button" id="buttonExchange" value="ドルから円に両替" onClick="exchange('toYen')">
	<input type="button" id="buttonExchange2" value="円からドルに両替" onClick="exchange('fromYen')">
	<hr>両替結果:
	<div id="outMoney">----</div>
</form>
</body>
</html>