Q&A
質問は何でしょうか
「うまくいかない」は誰にも何も伝えない表現です。
起きている現象を説明してください
前提・実現したいこと
JavaScriptで電卓を作成しています。
四則演算を押し続けた場合はうまく処理が返されるのですが、
”＝”処理がどうもうまく作動させることができません。
うまく”＝”処理を作動させたいです。
制約
クリック処理はHTML外に記載し、Javascript内に記載します。
また、eval関数は使えません。
発生している問題・エラーメッセージ
”＝”処理がどうもうまく作動させることができません。
〇＋〇＝〇 のように2つの処理なら正しい回答が返されるのですが、
〇＋〇＋〇＝〇 のように3つ以上の処理になると一個前の処理の〇＋〇の結果が返されます。
”＝”処理はEqual = function() {}内に記載しています。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>dentaku</title> 7 <link rel="stylesheet" href="css/main.css"> 8 <script src="https://code.jquery.com/jquery-3.5.0.min.js" ></script> 9 <script src="js/main.js"></script> 10 </head> 11 <body> 12 <table class = "table"> 13 <tr> 14 <td colspan="4"><input type = "text" id = "result" value = "" readonly></td> 15 </tr> 16 <tr> 17 <td colspan="4"><input type = "text" id = "process" value = "" readonly></td> 18 </tr> 19 <tr> 20 <td><input type = "button" class = "deleat" value = "C"id ="C"></td> 21 <td><input type = "button" class = "sign" value = "+/-"id ="+-"></td> 22 <td><input type = "button" class = "sign" value = "%"id ="%"></td> 23 <td><input type = "button" class = "cal" value = "÷"id ="÷"></td> 24 </tr> 25 <tr> 26 <td><input type = "button" class = "num" value="7" id ="7"></td> 27 <td><input type = "button" class = "num" value="8" id ="8"></td> 28 <td><input type = "button" class = "num" value="9"id ="9"></td> 29 <td><input type = "button" class = "cal" value="×"id ="×"></td> 30 </tr> 31 <tr> 32 <td><input type = "button" class = "num" value="4"id ="4"></td> 33 <td><input type = "button" class = "num" value="5"id ="5"></td> 34 <td><input type = "button" class = "num" value="6"id ="6"></td> 35 <td><input type = "button" class = "cal" value="-"id ="-"></td> 36 </tr> 37 <tr> 38 <td><input type = "button" class = "num" value="1"id ="1"></td> 39 <td><input type = "button" class = "num" value="2"id ="2"></td> 40 <td><input type = "button" class = "num" value="3"id ="3"></td> 41 <td><input type = "button" class = "cal" value="+"id ="+"></td> 42 </tr> 43 <tr> 44 <td colspan="2"><input type = "button" value = "0" class = "num"id ="0"></td> 45 <td ><input type = "button" value = "." class = "num" id ="."></td> 46 <td ><input type = "button" value = "=" class = "kekka" id ="="></td> 47 </tr> 48 </table> 49 50 </body> 51</html>
該当のソースコード
JavaScript
1window.addEventListener('load', function() { 2 //使う変数 3 let total = 0 4 let ans = 0 5 let key = "" 6 let keyflag = "" 7 // 初期化 8 deleat = function() { 9 result.value = "" 10 process.value = "" 11 total = 0 12 ans = 0 13 key = "" 14 keyflag = "" 15 } 16 17 // 押されたボタンが数字の場合テキストボックスに書いていく 18 $('.num').on('click', function() { 19 let number = $(this).attr("value") 20 if (number == '.') { 21 if (result.value.match(new RegExp("\.")) != null) return 0; 22 } 23 if (keyflag != "") valueC(); 24 result.value = result.value + number; 25 process.value += number 26 }); 27 //記号が押された場合 28 $('.sign').on('click', function() { 29 let sign = $(this).attr("value") 30 // 正負反転 31 if (sign == "+/-") { 32 result.value = result.value * -1; 33 process.value = process.value * -1; 34 // %押したとき。 35 } else if (sign == "%") 36 result.value = result.value * 0.01; 37 process.value = process.value; 38 }); 39 // 押されたボタンが演算子の場合の処理 40 {$('.cal').on('click', function() { 41 let keisan = $(this).attr("value") 42 total = result.value 43 process.value += keisan 44 if (key != "") { 45 ans = Run(ans, total, key); 46 total = 0; 47 result.value = ans; 48 }; 49 // keyに前回押した演算子を保存 50 key = keisan; 51 keyflag = keisan; 52 ans += total*1; 53 })}; 54 55 // 実行内部 56 Run = function(ans, total, keisan) { 57 if (keisan == "+") { 58 return ans*1 + total*1 59 } //1かけたことで文字型が数値型に変える 60 if (keisan == "-") { 61 return ans*1 - total*1 62 } 63 if (keisan == "×") { 64 return ans*1 * total*1 65 } 66 if (keisan == "÷") { 67 return ans*1 / total*1 68 } 69 } 70 71 // テキストボックス非表示 72 function valueC() { 73 result.value = ""; 74 keyflag = ""; 75 } 76 Equal = function() { 77 ans = Run(ans, total, key); 78 result.value = ans; 79 process.value += "="; 80 process.value += ans 81 } 82 83 84 // id取得 85 const result = document.getElementById("result") 86 const process = document.getElementById("process") 87 const deleatbtn = document.getElementById("C") 88 const equal = document.getElementById("=") 89 // クリック動作 90 deleatbtn.onclick = deleat 91 equal.onclick = Equal 92});
補足情報
まだ勉強したてで、実装が甘かったり、コードが見にくかったり、コメントがわかりづらいこと申し訳ございませんが、よろしくお願いいたします。
電卓は初心者向きではないと思うんですが、一回ごとに演算する形式ならいけますかね…。
「1+2*3」で期待する答えは9ですか。それとも、7ですか。
前者は簡単ですが、後者は演算子の優先順位を考慮する為に計算式全体をパースして演算する必要がある為、難易度が跳ね上がります。
(昔ながら持ってる安物電卓だと9ですが、Android10にプリインストールされている「電卓」は7でした。最近の電卓は賢いですね。)
> 〇＋〇＝〇 のように2つの処理なら正しい回答が返されるのですが、
「1+2=2」となりました。
https://jsfiddle.net/zw1b0dc9/
既に回答にもありますが、質問が、デバッグ依頼になっておりおりますので、
コンソールなどを使い自身のコードをもう少し追ってからの質問にされた方がいいかと・・・。
（まぁ、演算ボタンが押された場合、その処理を配列に格納する方が効率がいい気がする。数値も併せて）
結局、どのように解決としたのでしょうか。
https://teratail.com/help/question-tips#questionTips4-2
「自分だけが分かれば良い」スタンスは回答者に嫌われます。フィードバックを。
回答1件
0
ベストアンサー
コーディング云々は置いといて。質問がデバッグ依頼に近い…
開発者ツールとかで追いましょうよ
$('.cal').on('click'~でtotal=0がダメじゃないの？
javascript
1 if (key != '') { 2 ans = Run(ans, total, key); 3 total = 0; 4 result.value = ans; 5 }
Run = function (ans, total, keisan) {
これがある以上演算子２つ目はtotal=0にしかならない
投稿2020/06/28 11:09
総合スコア3830
あなたの回答
tips
プレビュー
