#はじめに
まだまだ未熟なコードだとは思いますが、
jsの勉強で電卓のプログラムを作成したので記録用に記します。
#イメージキャプチャ
#コード
html
<body>
<p id="errormessage"></p>
<div class="calculator">
<table>
<tr >
<td colspan="4">
<div class="head">
<input id ="result" placeholder="0"/>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="col2">
<button class="btn" onclick="update( '' ) ">clear</button>
</div>
</td>
<td></td>
<td>
<div>
<button onclick="btn('+')">+</button>
</div>
</td>
</tr>
<tr>
<td>
<div>
<button onclick="btn('1')">1</button>
</div>
</td>
<td>
<div>
<button onclick="btn('2')">2</button>
</div>
</td>
<td>
<div class="mr">
<button onclick="btn('3')">3</button>
</div>
</td>
<td>
<div>
<button onclick="btn('-')">-</button>
</div>
</td>
</tr>
<tr>
<td>
<div>
<button onclick="btn('4')">4</button>
</div>
</td>
<td>
<div>
<button onclick="btn('5')">5</button>
</div>
</td>
<td>
<div>
<button onclick="btn('6')">6</button>
</div>
</td>
<td>
<div>
<button onclick="calc2('*')">×</button>
</div>
</td>
</tr>
<tr>
<td>
<div>
<button onclick="btn('7')">7</button>
</div>
</td>
<td>
<div>
<button onclick="btn('8')">8</button>
</div>
</td>
<td>
<div>
<button onclick="btn('9')">9</button>
</div>
</td>
<td>
<div>
<button onclick="calc2('/')">÷</button>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="col2">
<button onclick="btn('0')">0</button>
</div>
</td>
<td>
<div>
<button onclick="btn('00')">00</button>
</div>
</td>
<td>
<div>
<button onclick="calc()">=</button>
</div>
</td>
</tr>
</table>
</div>
</body>
js
// 初期値０で四則演算子が押されたら'calcbtn'にする
var state = 0;
// inputに表示、エラー文消去
function show(elem) {
document.querySelector('input').value += elem;
errormessage.innerHTML = '';
}
// var checkNum = new RegExp(/^[0-9]/);
// checkNum.test(inputV)
// 押されたボタンを表示
function btn(elem) {
var inputV = document.querySelector('input').value;
// 四則演算子ボタンが押された時
if (elem === '+' || elem === '-' || elem === '*' || elem === '/') {
//四則演算子ボタンが入力された時に連続で押せないようにする
if (state === 'calcbtn') {
var inputV = document.querySelector('input').value;
inputV = inputV.slice(0, -1);
document.querySelector('input').value = inputV;
show(elem)
} else {
state = 'calcbtn';
show(elem)
}
} else {
state = 0;
show(elem)
}
};
// 最初に'*','/'が入力された時に弾く
function calc2 (elem) {
var inputV = document.querySelector('input').value;
if (inputV === '' || inputV === '+' || inputV === '-') {
return;
} else {
btn(elem);
}
};
// input を更新する
function update(elem) {
document.querySelector('input').value = elem;
errormessage.innerHTML = '';
}
// =ボタンが押された時計算する
var errormessage = document.getElementById('errormessage');
function calc() {
var inputV = document.querySelector('input').value;
try {
var total = new Function('return ' + inputV);
update( total().toString() );
} catch {
errormessage.innerHTML = '入力値が不正です。'
}
}
#終わりに
少しでも後学者の方の参考になれば幸いです！
指摘などがありましたら、コメントなどによろしくお願いいたします！