実現したいこと
javascript にて電卓を作成中です。
現在「１＋１＝」「２」と入力されたあと「３」と押下すると「２３」と表示され
前回の回答が残ったままになってしまうため２を消して３から表示されるようにしたいです
発生している問題・エラーメッセージ
if (一個前に入力したのが＝だった場合)
{表示されている値を削除して
次に入力した値から表示}
という条件にすれば実現できるのではと考え以下のif文を追加しましたがうまく行きません。
現在のソースコード
html
1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="utf-8">5 <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>6 <link rel="stylesheet" href="calc.css">7 <title>calclator</title>8 </head>9 10 <body>11 12<div class=calculator>13<div class="display">14 <input type="text" id="display" value="0" disabled>15</div>16 17<table class="keypad">18 <tr>19 <td><button class="number" onclick="clickButton(this)">7</button></td>20 <td><button class="number" onclick="clickButton(this)">8</button></td>21 <td><button class="number" onclick="clickButton(this)">9</button></td>22 <td><button id="opr" onclick="clickButton(this)">+</button></td>23 </tr>24 25 <tr>26 <td><button class="number" onclick="clickButton(this)">4</button></td>27 <td><button class="number" onclick="clickButton(this)">5</button></td>28 <td><button class="number" onclick="clickButton(this)">6</button></td>29 <td><button id="opr" onclick="clickButton(this)">-</button></td>30 </tr>31 32 <tr>33 <td><button class="number" onclick="clickButton(this)">1</button></td>34 <td><button class="number" onclick="clickButton(this)">2</button></td>35 <td><button class="number" onclick="clickButton(this)">3</button></td>36 <td><button id="opr" onclick="clickButton(this)">*</button></td>37 </tr>38 39 <tr>40 <td><button class="number" onclick="clickButton(this)">0</button></td>41 <td><button onclick="clickButton(this)">00</button></td>42 <td><button id="comma" onclick="clickButton(this)">.</button></td>43 <td><button id="opr" onclick="clickButton(this)">/</button></td>44 </tr>45 46 <tr>47 <td><button onclick="clickButton(this)">AC</button></td>48 <td><button onclick="clickButton(this)">=</button></td>49 </tr>50</table> 51 52</div>53</div>54 55 56 <script src="calc.js"></script>57 </body>58 </html>
javascript
1let display = document.getElementById('display');2let result = 0;3 4 5function clickButton(target) {6 let target_value = target.innerHTML;7 result=display.value;8 9 if (target_value=="AC") {10 display.value= "0"; //ACを押すと表示される数字を０に統一11 } else if (target_value == "="){12 display.value = eval(result); //計算結果を表示13 } else if (display.value==="0" && target_value!==".") {14 display.value = target_value; //最初の０に上書き15 } else if (target_value.slice(-1)==="="){ //最後の入力が＝の場合16 display.value=""; //表示されている数字を削除して17 display.value=target_value; //入力した値を表示18 }19 else {20 display.value += target_value; //入力したものを横に並べていく21 }22 console.log(target_value);
上記のままだと前回の回答が残ったままの状況で実装したい内容がうまく実現できていません。
display.value=target_value; が大きく間違っているんだろうなーと思いつつ
「次に入力した値から表示」のやり方がわからずです。
上記を修正する場合のヒント、
もしくはそもそもの考え方が違うよ〜などといったご指導いただけると幸いです。
0 コメント