함께 두 자리 변수 추가

Question

저는 JavaScript와 그 기능이 새로 도입되었습니다. 나는 현재 어떤 기술을 시험해보기 위해 기본적인 계산기를 만들려고 노력하고 있으며 문제가있다. 예 : 두 자리 숫자를 넣으려고하면 두 개의 숫자가 함께 추가됩니다. 예 : 12 + 5에 넣으면 8이라는 답을 얻을 수 있습니다. 두 자리를 함께 더하고 수정하는 방법을 알 수 없습니다. 감사합니다, 나는 어떤 제안 :) PS 열어주는 말들 : 죄송합니다 그 많은 `

  </div> 
        <button type="button" onclick="putToScreen(1); xValue += parseInt(1)" class="inputButton1 input" value="1">1</button> 
        <button type="button" onclick="putToScreen(2); xValue += parseInt(2)" class="inputButton1 input" value="2">2</button> 
        <button type="button" onclick="putToScreen(3); xValue += parseInt(3)" class="inputButton1 input" value="3">3</button> 
        <button type="button" onclick="putToScreen('+'); plusButton++" class="inputButton1" value="+">+</button> 
        <button type="button" onclick="putToScreen(4); xValue += parseInt(4)" class="inputButton2 input" value="4">4</button> 
        <button type="button" onclick="putToScreen(5); xValue += parseInt(5)" class="inputButton2 input" value="5">5</button> 
        <button type="button" onclick="putToScreen(6); xValue += parseInt(6)" class="inputButton2 input" value="6">6</button> 
        <button type="button" onclick="putToScreen('-')" class="inputButton2" value="-">-</button> 
        <button type="button" onclick="putToScreen(7); xValue += parseInt(7)" class="inputButton3 input" value="7">7</button> 
        <button type="button" onclick="putToScreen(8); xValue += parseInt(8)" class="inputButton3 input" value="8">8</button> 
        <button type="button" onclick="putToScreen(9); xValue += parseInt(9)" class="inputButton3 input" value="9">9</button> 
        <button type="button" onclick="putToScreen('*')" class="inputButton3" value="*">*</button> 
        <button type="button" onclick="clearScreen()" class="inputButton" value="C">C</button> 
        <button type="button" onclick="putToScreen(0); xValue += parseInt(0)" class="inputButton4 input" value="0">0</button> 
        <button type="button" class="inputButton4" onclick="compute()" value="=">=</button> 
        <button type="button" onclick="putToScreen('/')" class="inputButton4" value="/">/</button> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     var input = document.getElementsByClassName("inputButton"); 
     //var valueBox = document.getElementById("answer"); 
     var answer = document.getElementById("answer"); 

     // var xValue = do i += 
     var xValue = 0; 
     var yValue = 0; 
     var plusButton = 0; 
     //var finalAnswer 

     function putToScreen (x) { 
      var node = document.createTextNode(x); 
      answer.appendChild(node); 
     } 

     function clearScreen() { 
      answer.innerHTML = ""; 
      xValue = 0; 
      yValue = 0; 
      plusButton = 0; 
     } 

     function add() { 
      if (plusButton >= 1) { 
       document.getElementsByClassName("input").onclick = "yValue +="; 
      } 
      var sum = parseInt(xValue) + parseInt(yValue); 
      answer.innerHTML = sum; 
     } 

     //var sum = parseInt(xValue) + parseInt(yValue); 

     function compute() { 
      if(plusButton >= 1) { 
       add(); 
      } 
     } 

`

Answer 1

업데이트

@Ryan는 eval을 추천하기위한 작업 나를 불렀다. 나는 eval이 항상 악하다고 동의하지 않으며, 을 수행하면은 입력이 버튼 누름으로 제한되기 때문에이 상황에서 사용하는 것이 적절하다고 생각합니다. 하지만 나는 항상 eval을 신중히 사용해야한다고 지적 했어야했다.

이 유형의 문제에 eval을 사용하는 것이 유리한 다른 주장을 보려면 Calculate string value in javascript, not using eval을 참조하십시오.

그러나 멋진 대안이 @yckart에 의해 제시되었으므로 여기에 새로운 권장 사항이 있습니다.

이에 컴퓨팅 기능을 변경

: 그런 다음 계산을 수행하는 모든 논리를 제거 할 수 있습니다

function compute() { 
    answer.innerHTML = new Function('return ' + answer.innerHTML)(); 
} 

. (그렇지 않으면, 당신은 주요 작업입니다 재귀 하강 파서를 작성해야합니다 것입니다.)

가 귀하의 질문에 대답하기 위해, 을 "은 제곱근과 사각형 같은 것들을 사용할 수 있습니까?" : eval과 Function 방법은 유효한 자바 스크립트 표현식으로 작동합니다..

1. Math.sqrt(number)이 숫자의 제곱근을 반환
2. Math.pow(number, 2) 사각형 수

을 발췌문

function putToScreen (x) { 
 
    var node = document.createTextNode(x); 
 
    answer.appendChild(node); 
 
} 
 

 
function clearScreen() { 
 
    answer.innerHTML = ''; 
 
} 
 

 
function compute() { 
 
    answer.innerHTML = new Function('return ' + answer.innerHTML)(); 
 
}

button { 
 
    width: 2em; 
 
}

<div id="answer"></div> 
 
<hr> 
 
<button onclick="putToScreen(this.innerText)" >1</button> 
 
<button onclick="putToScreen(this.innerText)" >2</button> 
 
<button onclick="putToScreen(this.innerText)" >3</button> 
 
<button onclick="putToScreen(this.innerText)" >+</button><br> 
 
<button onclick="putToScreen(this.innerText)" >4</button> 
 
<button onclick="putToScreen(this.innerText)" >5</button> 
 
<button onclick="putToScreen(this.innerText)" >6</button> 
 
<button onclick="putToScreen(this.innerText)" >-</button><br> 
 
<button onclick="putToScreen(this.innerText)" >7</button> 
 
<button onclick="putToScreen(this.innerText)" >8</button> 
 
<button onclick="putToScreen(this.innerText)" >9</button> 
 
<button onclick="putToScreen(this.innerText)" >*</button><br> 
 
<button onclick="clearScreen(this.innerText)" >C</button> 
 
<button onclick="putToScreen(this.innerText)" >0</button> 
 
<button onclick="compute()"     >=</button> 
 
<button onclick="putToScreen(this.innerText)" >/</button>

Answer 2

이유는 당신이 당신이 대응에 의해가 xValue 및 yvalue을 증가 누를 때마다 버튼으로 각 버튼에 속하는 숫자입니다. 당신이 12 예 유형, 당신은 2

참고로 처음 1 일까지 다음에 xValue을 증가한다면

xValue+=n 

은 n으로가 xValue을 증가시킨다. 동등하게 쓸 수 있습니다.

xValue=xValue+ n 

빛이 더 익숙합니다.

Answer 3

+, -, * 또는 /를 누를 때까지 사용자 입력을 문자열로 처리해야합니다. 즉 숫자를 숫자로 xValue에 추가하는 것이 아니라 문자열로 추가하는 것입니다. 1을 눌러 예를 들어 당신이 다음 (12)에서 입력하면 사용자가 현재 다른 버튼 중 하나를 누르면, 당신은이 숫자가 완료된 것을 알고,

xValue = "12" 

을 얻을

xValue+= "1" 

를 사용하고 parseInt()를 사용하여 숫자로 변환 할 수 있습니다. 좋은 이유 -