2桁以上の数値を電卓の配列に渡す方法jQuery + HTML

Question

私はjQueryとHTMLを使って簡単な電卓を作っています。ボタンの値を配列に渡し、配列を文字列に変換し、eval()を使用して合計数を計算します。

私が理解できないことは、2桁以上の値を渡すことです。現在、配列には1桁の数値しか渡すことができません。配列に20,200,2000などの値を渡すにはどうすればよいですか？

codepen demo

のjQueryコード：

var totalNum = []; 

$(".button").click(function() { 
    if (!$(this).hasClass("operator")) { 
    $("#display").val(($("#display").val()) + ($(this).val())); 
    totalNum.push((($("#display").val()) + ($(this).val()))); 
    } else { 
    if ($("#display").val() != '') { 
     if ($(this).hasClass("operator")) { 
     $("#display").val(''); 
     totalNum.push(($(this).val())); 
     } else { 
     $("#display").val(($("#display").val()) + ($(this).val())); 
     totalNum.push(($(this).val())); 
     } 
    } 
    } 
}) 

$("#clearButton").click(function() { 
    $("#display").val(''); 
    totalNum = []; 
}) 

$("#equalsButton").click(function() { 
    var total = totalNum.join(" "); 
    $("#display").val(eval(total)); 
}) 

Answer 1

var totalNum = []; 
 

 
$(".button").click(function() { 
 
    if (!$(this).hasClass("operator")) { 
 
    $("#display").val(($("#display").val()) + ($(this).val())); 
 
    //totalNum.push((($("#display").val()))); 
 
    //console.log("two" + totalNum 
 
    console.log('Not operator.'); 
 
    } else { 
 
    if ($("#display").val() != '') { 
 
     if ($(this).hasClass("operator")) { 
 
     totalNum.push((($("#display").val()))); 
 
     // $("#display").val(($("#display").val()) + ($(this).val())); 
 
     $("#display").val(''); 
 
     totalNum.push(($(this).val())); 
 
     console.log("Click operator" + totalNum) 
 
     } else { 
 
     $("#display").val(($("#display").val()) + ($(this).val())); 
 
     totalNum.push(($(this).val())); 
 
     console.log("three" + totalNum) 
 
     } 
 
    } 
 
    } 
 
}) 
 

 
$("#clearButton").click(function() { 
 
    $("#display").val(''); 
 
    totalNum = []; 
 
}) 
 

 
$("#equalsButton").click(function() { 
 
    totalNum.push((($("#display").val()))); 
 
    var total = totalNum.join(" "); 
 
    console.log("total" + total) 
 
    $("#display").val(eval(total)); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td colspan="4"><input id="display" name="display" disabled></input> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td><button id="button1" class="button number" value="1">1</button></td> 
 
    <td><button id="button2" class="button number" value="2">2</button></td> 
 
    <td><button id="button3" class="button number" value="3">3</button></td> 
 
    <td><button id="addButton" class="button operator" value="+">+</button></td> 
 
    </tr> 
 
    <tr> 
 
    <td><button id="button4" class="button number" value="4">4</button></td> 
 
    <td><button id="button5" class="button number" value="5">5</button></td> 
 
    <td><button id="button6" class="button number" value="6">6</button></td> 
 
    <td><button id="subtractButton" class="button operator" value="-">-</button></td> 
 
    </tr> 
 
    <tr> 
 
    <td><button id="button7" class="button number" value="7">7</button></td> 
 
    <td><button id="button8" class="button number" value="8">8</button></td> 
 
    <td><button id="button9" class="button number" value="9">9</button></td> 
 
    <td><button id="multiplyButton" class="button operator" value="*">*</button></td> 
 
    </tr> 
 
    <tr> 
 
    <td><button id="clearButton">C</button></td> 
 
    <td><button id="button0" class="button number" value="0">0</button></td> 
 
    <td><button id="equalsButton">=</button></td> 
 
    <td><button id="divideButton" class="button operator" value="/">&#247;</button></td> 
 
    </tr> 
 

 

 

 
</table>

それは私の解決策だとそれが唯一の答えではありません。

これは、問題を解決するための単なる方法です。

電卓を作れば、私は計画を立てようとします。

ユーザーがnumber buttonをクリックしたとき、私はpush()を表示しません。

ユーザーがoperator buttonをクリックしたとき、入力前にpush()を入力しています。

push()operator signもあります。

equal buttonをクリックすると、前に入力した数値をeval()にして計算結果を表示すると、push()と表示されます。

私の説明を理解してください。