계산기에서 배열에 두 자리 숫자보다 큰 수를 전달하는 방법 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을 클릭하면 수치를 입력 한 후 push()을 입력하고 eval()을 작성하고 계산 결과를 표시합니다.

나는 .. 내 설명을 이해한다.