javascriptで電卓を作っており、値を保存する機能を追加したい

javascriptで電卓を作っています。(初心者です)
参考サイトは以下です。

https://bobu.work/caculation/#index_id2

以下質問です。

イメージ説明
・画像添付の②に電卓で表示されている①の内容を一度保存したい。
どのようなコードを打ち込めば保存となりますでしょうか。

→実際にコードを打ち込みました。
↓↓試した事です。

$('.save').on('click',function(){ $('.display').text(''); num_2 = num_3; num_1 = num_4; }) コード

のコードを打ち込みましたが、予定通りの動きをしている様に思えます。
違う場合はコード例と一緒にご教授下さい。(答えそのままでも可)

③ ②で保存した内容を今度は①に表示させたいです。
表示されるにはどうしたらよろしいでしょうか。

↓↓試した事です。

$('.return').on('click',function(){ $('.display').text(calculation ? num_2 : num_1); }) コード

これも上手く動作しません。
違う場合はコード例と一緒にご教授下さい。(答えそのままでも可)

$(function(){ let push_num = [], num_1 = '', num_2 = '', num_3 = '', ←追加 num_4 = ''; ←追加 cal = '', answer = '', calculation = false; $('.switch').on('click',function(){ push_num.push($(this).text()); if(calculation == true){ num_2 = push_num.join(''); $('.display').text(num_2); num_3 = num_2; ←追加 }else{ num_1 = push_num.join(''); num_4 = num_1; ←追加 $('.display').text(num_1); } }) $('.calculation').on('click',function(){ cal = $(this).attr('id'); calculation = true; push_num = []; $('.display').text(''); }) $('.result').on('click',function(){ switch(cal){ case 'plus': let sum_1 = parseInt(num_1); let sum_2 = parseInt(num_2); answer = sum_1 + sum_2; break; case 'minus': answer = num_1 - num_2; break; case 'multiply': answer = num_1 * num_2; break; case 'divide': answer = num_1 / num_2; break; } $('.display').text(answer); num_1 = answer; }) $('.reset').on('click',function(){ num_1 = ''; num_2 = ''; cal = ''; answer = ''; calculation = false; push_num = []; $('.display').text(''); }) *******************追加************************* $('.save').on('click',function(){ $('.display').text(''); num_2 = num_3; num_1 = num_4; }) $('.return').on('click',function(){ $('.display').text(calculation ? num_2 : num_1); }) ****************追加****************************** }); </script> <h1>電卓</h1> <div class="display"></div> <div class="box"> <div class="switch" id="1">1</div> <div class="switch" id="2">2</div> <div class="switch" id="3">3</div> <div class="switch" id="4">4</div> <div class="switch" id="5">5</div> <div class="switch" id="6">6</div> <div class="switch" id="7">7</div> <div class="switch" id="8">8</div> <div class="switch" id="9">9</div> <div class="switch" id="0">0</div> <div class="reset">AC</div> <div class="result">=</div> </div> <div class="signal"> <div class="calculation" id="plus">+</div> <div class="calculation" id="minus">-</div> <div class="calculation" id="multiply">*</div> <div class="calculation" id="divide">/</div> <div class="calculation" id="save">save</div> ←追加 <div class="calculation" id="return">return</div> ←追加 コード

<追記>
まず、はじめに本プログラムを作成の目的としましては、私のプログラミング的なところの理解
深めたい点と、電卓の完成を目指して質問をさせていただいております。

  1. 現状の電卓の動作について、どの操作をしたときに変数がどう変化するを全て理解について

→私自身勉強を始めたばかりで理解が足りてないところがあると思います。

なので、例えば1を押した後は変数〇〇の値は1になるので、この時に変数〇〇
にもその値を代入してsave用の変数として保存しましょう。
等のレベル間でご教授頂けますと大変助かります。

  1. saveを押すと表示は削除するのですか?

→現在はその認識で作成を進めております。

    1. saveを押すと現在状態を保存して、returnを押すとsaveした時の状態を復元するものなのか。

→ご認識の通りです。
①電卓の上の数値が3の時にsaveボタンをクリック
②画面上一旦消去されるが、変数には保存される。
③returnボタンをクリックする事によって、②の保存内容を再度表示する。

①~③の動作が上手く出来ていないように見えるので、
コードの記述の仕方についてご教授お願いします。

コメントを投稿

0 コメント