2017-10-14 21 views
0

現在のコードでは、演算子を正しく表示できません。現時点では、最初の計算後に演算子を表示できません。たとえば、私がこれを行う場合、 '9 + 2'を押し、 '='を押します。私は結果を得るでしょうが、私が '*'のような演算子を押すと、ディスプレイには番号のない演算子しか表示されません。私の現在のコードを見て、私は何が欠けていますか?お知らせ下さい。JavaScript計算ツールで適切な算術演算ができないコード

$(document).ready(function() { 
 
    var shouldbeClear = false; 
 
    //create variable to store input from user to calculate later 
 
    var inputs = ['']; 
 
    //create string to store current input string 
 
    var totalString; 
 
    //create operators array for validation without the . 
 
    var operators1 = ['+', '-', '*', '/']; 
 
    var operators2 = ['.']; 
 
    //numbers for validation 
 
    var nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
 

 
    function getValue(value) { 
 
    if (operators2.includes(inputs[inputs.length - 1]) === true && value === '.') { 
 
     alert('STOP & RESTART!!!'); 
 
    } else if (inputs.length === 1 && operators1.includes(value) === false) { 
 
     inputs.push(value); 
 
    } else if (operators1.includes(inputs[inputs.length - 1]) === false) { 
 
     inputs.push(value); 
 
    } else if (nums.includes(Number(value))) { 
 
     inputs.push(value); 
 
    } 
 
    update(); 
 

 
    } 
 

 
    function update() { 
 
    totalString = inputs.join(''); 
 
    $('#display').html(totalString); 
 
    } 
 

 

 

 
    function getTotal() { 
 
    shouldbeClear = true; 
 
    totalString = inputs.join(''); 
 
    $('#display').html(eval(totalString)); 
 
    var result = document.getElementById("display").innerHTML; 
 
    inputs = []; 
 
    inputs[0] = ''; 
 
    for (var i = 0; i <= result.length - 1; i++) { 
 
     inputs[i + 1] = result[i]; 
 

 
    } 
 
    update(); 
 

 
    } 
 

 
    $('button').on('click', function() { 
 
    if (this.id === 'deleteAll') { 
 
     inputs = ['0']; 
 
     update(); 
 

 
    } else if (this.id === 'backSpace') { 
 
     inputs.pop(); 
 
     update(); 
 
    } else if (this.id === 'total') { 
 
     getTotal(); 
 

 
    } else { 
 
     if (inputs[inputs.length - 1].indexOf('+', '-', '/', '*', '.') === -1) { 
 
     if (shouldBeCleared){ 
 
     shouldBeCleared = false; 
 
     inputs=['']; 
 
     update(); 
 

 
     getValue(this.id); 
 

 
     } else { 
 
     getValue(this.id); 
 

 

 
     } 
 
    } 
 

 
    }) 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div id="calcOutput"> 
 
    <span id="display">Enter Some Number...</span> 
 
    <hr> 
 
    </div> 
 
    <div class="text-center" id="calculator"> 
 
    <button type="button" class="btn btn-danger btn-lg btn3d" id="deleteAll">AC</button> 
 
    <button type="button" class="btn btn-warning btn-lg btn3d" id="backSpace">CE</button> 
 
    <button type="button" class="btn btn-success btn-lg btn3d" id="/">/</button> 
 
    <button type="button" class="btn btn-success btn-lg btn3d" id="*">*</button><br> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="7">7</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="8">8</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="9">9</button> 
 
    <button type="button" class="btn btn-success btn-lg btn3d" id="-">-</button><br> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="4">4</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="5">5</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="6">6</button> 
 
    <button type="button" class="btn btn-success btn-lg btn3d" id="+">+</button><br> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="1">1</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="2">2</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="3">3</button> 
 
    <button type="button" class="btn btn-success btn-lg btn3d" id=".">.</button><br> 
 

 
    <button type="button" class="btn btn-info btn-lg btn3d bigButton" id="0">0</button> 
 
    <button type="button" class="btn btn-info btn-lg btn3d bigButton" id="total">=</button><br> 
 
    </div> 
 
</div>

+0

あなたのポスト – John

+0

の人が実行するためのスニペットを作成することができた場合は、あなたの質問を更新し、関連する 'javascript'を記載してください。また、あなたが試したことを説明してください。ありがとうございました。 – NewToJS

+0

親愛なるシルクショッカーは、あなたがこの問題をどのように扱ったのか本当に哀れみを感じます。特定の問題を尋ね、適切な回答を得た後に、別の問題を尋ねる自分の質問への回答を実装するのは理にかなっていません。この場合、@ unamata-sanataraiだったあなたを助けるために努力した人にはちょうど不公平です。あなたの元の要求を解決した彼の答え(https://stackoverflow.com/a/46749561/3931192)。そのため私はあなたの質問をd​​ownvoteしなければならなかった。 – Axel

答えて

2

それがすべてをクリアする必要があるかどうか電卓を通知する変数を追加します。

私は、変数shouldBeCleared

あなたはshouldBeClearedがtrueに設定されている=をクリックするたびに呼ばれます。

NUMBERをクリックすると、shouldBeClearedがtrueに設定されているかどうかがチェックされ、入力配列とupdate()がクリアされます。

次のように:にはjavascriptのはありません

$(document).ready(function() { 
 
    var shouldBeCleared = false; 
 
    //create variable to store input from user to calculate later 
 
    var inputs = ['']; 
 
    //create string to store current input string 
 
    var totalString; 
 
    //create operators array for validation without the . 
 
    var operators1 = ['+', '-', '*', '/']; 
 
    var operators2 = ['.']; 
 
    //numbers for validation 
 
    var nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
 

 
    function getValue(value) { 
 
    if (operators2.includes(inputs[inputs.length - 1]) === true && value === '.') { 
 
     alert('STOP & RESTART!!!'); 
 
    } else if (inputs.length === 1 && operators1.includes(value) === false) { 
 
     inputs.push(value); 
 
    } else if (operators1.includes(inputs[inputs.length - 1]) === false) { 
 
     inputs.push(value); 
 
    } else if (nums.includes(Number(value))) { 
 
     inputs.push(value); 
 
    } 
 
    update(); 
 

 
    } 
 

 
    function update() { 
 
    totalString = inputs.join(''); 
 
    $('#display').html(totalString); 
 
    } 
 

 

 

 
    function getTotal() { 
 
    shouldBeCleared = true; 
 
    totalString = inputs.join(''); 
 
    $('#display').html(eval(totalString)); 
 
    var result = document.getElementById("display").innerHTML; 
 
    inputs = []; 
 
    inputs[0] = ''; 
 
    for (var i = 0; i <= result.length - 1; i++) { 
 
     inputs[i + 1] = result[i]; 
 

 
    } 
 
    update(); 
 

 
    } 
 

 
    $('button').on('click', function() { 
 
    if (this.id === 'deleteAll') { 
 
     inputs = ['0']; 
 
     update(); 
 

 
    } else if (this.id === 'backSpace') { 
 
     inputs.pop(); 
 
     update(); 
 
    } else if (this.id === 'total') { 
 
     getTotal(); 
 

 
    } else { 
 
     if (inputs[inputs.length - 1].indexOf('+', '-', '/', '*', '.') === -1) { 
 
     
 
     if (shouldBeCleared){ 
 
      shouldBeCleared = false; 
 
      inputs=['']; 
 
      update(); 
 
     } 
 
     getValue(this.id); 
 

 
     } else { 
 
     getValue(this.id); 
 

 

 
     } 
 
    } 
 

 
    }) 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div id="calcOutput"> 
 
    <span id="display">Enter Some Number...</span> 
 
    <hr> 
 
    </div> 
 
    <div class="text-center" id="calculator"> 
 
    <button type="button" class="btn btn-danger btn-lg btn3d" id="deleteAll">AC</button> 
 
    <button type="button" class="btn btn-warning btn-lg btn3d" id="backSpace">CE</button> 
 
    <button type="button" class="btn btn-success btn-lg btn3d" id="/">/</button> 
 
    <button type="button" class="btn btn-success btn-lg btn3d" id="*">*</button><br> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="7">7</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="8">8</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="9">9</button> 
 
    <button type="button" class="btn btn-success btn-lg btn3d" id="-">-</button><br> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="4">4</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="5">5</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="6">6</button> 
 
    <button type="button" class="btn btn-success btn-lg btn3d" id="+">+</button><br> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="1">1</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="2">2</button> 
 
    <button type="button" class="btn btn-primary btn-lg btn3d" id="3">3</button> 
 
    <button type="button" class="btn btn-success btn-lg btn3d" id=".">.</button><br> 
 

 
    <button type="button" class="btn btn-info btn-lg btn3d bigButton" id="0">0</button> 
 
    <button type="button" class="btn btn-info btn-lg btn3d bigButton" id="total">=</button><br> 
 
    </div> 
 
</div>

+0

加算の値を保持するのではなく、それを消去して、その前に数字のない演算子で終わります。 – silkshocker

+1

元のコードでその操作が可能です。私は、 '='をクリックした後で消去部分だけを処理しました。残りの問題を解決するために別の質問をお勧めしますか? –

+1

ちょうど別の意見を追加:私はUnamata Sanataraiがここにいると思います。 @silkshockerあなたの処方は正確であり、前進していました:** "前回の計算が完了した後に押した新しい番号のみをリセットして表示します。これはまさにUnamata Sanataraisの解決策です。だから私は彼の答えを受け入れてマークし、新しい問題について別の質問をします。あなたの次の質問がこれと同様に実行されれば、あなたは余分な担当者を得ることになるので、勝利も勝ちます。とにかく私の質問と答えの両方に+1!敬具:) – Axel