今日はJavaScriptで四則演算する計算機を作ろうと思います。
まずHTMLから。
数字を入力するボタンと、
四則演算のボタン、結果を表示するDivボックスを作ります。
<input type="text" id="keisan01">
<input type="text" id="keisan02">
<button onclick="keisan()">たす</button>
<button onclick="kakeru()">かける</button>
<button onclick="hiku()">ひく</button>
<button onclick="waru()">わる</button>
<div id="kekka"></div>
function名はkeisan()、kakeru()、hiku()、waru()と安直につけてしまいましょう。
また結果表示部分は id=”kekka”とします。
function keisan() {
tasu = document.getElementById('keisan01');
tasareru = document.getElementById('keisan02');
x = parseInt(tasu.value);
y = parseInt(tasareru.value);
b = x + y;
kekka.innerHTML = b;
}
function kakeru() {
tasu = document.getElementById('keisan01');
tasareru = document.getElementById('keisan02');
x = parseInt(tasu.value);
y = parseInt(tasareru.value);
b = x * y;
kekka.innerHTML = b;
}
function hiku() {
tasu = document.getElementById('keisan01');
tasareru = document.getElementById('keisan02');
x = parseInt(tasu.value);
y = parseInt(tasareru.value);
b = x - y;
kekka.innerHTML = b;
}
function waru() {
tasu = document.getElementById('keisan01');
tasareru = document.getElementById('keisan02');
x = parseInt(tasu.value);
y = parseInt(tasareru.value);
b = x / y;
kekka.innerHTML = b;
}
1つfunctionを作って後はコピーする方法を取ろうと思います。
document.getElementByIdでkeisan01、keisan02をそれぞれ変数に取り込みます。
割り算もあるので整数にするためparseInt関数を通し、x,yに格納します。
その後演算のため「b = x + y」として、
innerHTMLでDivボックス「kekka」に表示します。
以降はこのfunctionをコピーして、それぞれ演算子を変更します。
動いたら色々数字を変えて遊んで見ましょう!
Visited 13 times, 1 visit(s) today