締切済み

javascriptで電卓を作成

  • 困ってます
  • 質問No.9424855
  • 閲覧数386
  • ありがとう数0
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 66% (4/6)

プログラミングをまったくやったことがない状態から、ドットインストールやテックアカデミーのHTML,CSS,Javascriptの入門動画をすべて見終わった段階ですので、
基本的な仕組みと関数やfor文、if文、while文、などについてくらいは理解しています。

今回、javascriptを使って電卓のシステムを組む、という課題があり、
ネットで検索してやってみてはいるのですが行き詰っています。

最初は以下のような形で作成をしていました。


<body>


<form name="myform">
 <table border="1">
<tr>
<td colspan="4">
<input type="text" name="result" value="" id="result">
</td>
</tr>

<tr>
<td><input type="button" value=" "onclick="calc(' ')" ></td>
<td><input type="button" value="%"onclick="calc('%')"></td>
<td colspan="2">
<input type="button" value="AC" onclick="calc('AC')"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="calc('7')"></td>
<td><input type="button" value="8" onclick="calc('8')"></td>
<td><input type="button" value="9" onclick="calc('9')"></td>
<td><input type="button" value="÷" onclick="calc('÷')"></td>
</tr>
<tr>
<td><input type="button" value="4"onclick="calc('4')" ></td>
<td><input type="button" value="5"onclick="calc('5')" ></td>
<td><input type="button" value="6"onclick="calc('6')"></td>
<td><input type="button" value="×" onclick="calc('×')"></td>
</tr>
  <tr>
<td><input type="button" value="1" onclick="calc('1')" ></td>
<td><input type="button" value="2" onclick="calc('2')"></td>
<td><input type="button" value="3" onclick="calc('3')"></td>
<td><input type="button" value="-" onclick="calc('-')"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="calc('0')" ></td>
<td><input type="button" value="+" onclick="calc('+')"></td>
<td colspan="2">
<input type="button" value="=" onclick="calc('=')"></td>
</tr>

</form>

<script>
function calc(a) {
if (a === "=") {
document.myform.kekka.value =
eval(document.myform.kekka.value);

} else if (a === "AC") {
document.myform.kekka.value = "";

} else {
document.myform.kekka.value += a;
}

</script>
</body>
</html>

ですが、onclickとevalを使わず、代わりに「addEventListner」を用いるよう指示されました。
「addEventListner」に関しては、検索してなんとかざっと理解したのですが、それ以前に、電卓の基本的な関数の組み方を理解していないため、いまいちどこから手をつけたらいいかわかりません。
いろんなサイトを見ているといろんなやり方がでてきますが、ope=+,やflag=0などの表記をよく見かけます。が、この意味もいまいちわかっていません。。

初心者すぎるので、何かアドバイスをいただけますと幸いです。
宜しくお願いいたします。

また、このような初心者が使いこなせるようになるために向いている動画や書籍、ページがありましたら教えていただけますと助かります。

回答 (全2件)

  • 回答No.2

ベストアンサー率 44% (186/418)

codepenにソースを貼っておきましたので、
理解できるまで、あれこれいじくり回してください。
addEventListenerは64行目のsetKey関数で使用しました。
ただ、電卓のボタンというものは、キー入力以外の機能はないはずなので、onclick属性を指定するほうが正しいような気がします。
計算はevalを使わずキーを押すごとに行っています。
  • 回答No.1

ベストアンサー率 48% (239/494)

input要素についている onclick="..." は、外す。
試してないけど、こんな感じ?
// element.tagName === 'INPUT' を付けようか?

function handleEvent (event) {
 let element = event.target;
 if ('button' === element.type) {
  swicth (element.value) {
  case 1 : case '1' :

   break;

  }

  console.log (element.value);
 }

}

document.addEventListener ('click', handleEvent, false);
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


OKWAVE若者応援スペシャル企画

ピックアップ

ページ先頭へ