Adding double digit variables together

Question

I'm fairly new to JavaScript and its functionalities. I am currently trying to make a basic calculator to try out some skills, and have encountered a problem. When i try to put in a double digit number, it add the 2 numbers together, Ex: I put in 12 + 5, and the answer i get is 8. It add the double digit together and cannot figure out how to fix it. Thanks, and I am open to any suggestions :) PS: Sorry its a lot `

            </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

Update

@Ryan called me to task for recommending eval – for good reason. I don't agree that eval is always evil, and I do think it's appropriate to use in this situation, because input is limited to button presses. But I should have pointed out that eval should always be used with caution.

See Calculate string value in javascript, not using eval to see other arguments in favor of using eval for this type of problem.

But a wonderful alternative was presented by @yckart, so here's my new recommendation.

Change the compute function to this:

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

You can then remove all the logic that does the calculations. (Otherwise, you'd need to write a recursive descent parser, which is a major task.)

To answer your question, "Does it work with things like square roots and squares?": eval and the Function method will work with any valid JavaScript expression:

1. Math.sqrt(number) returns the square root of a number.
2. Math.pow(number, 2) squares a number.

Snippet

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

The reason is that by each button that you press you increase xvalue and yvalue by the corresponding digit that belongs to the button, respectively. So if you for example type in 12, you increase xvalue first by 1 and then by 2.

Note

xValue+=n

increases xvalue by n. You can equivalently write it like this

xValue=xValue+ n

which light be more familiar.

Answer 3

You should handle the user input as a string until +, -, * or / is pressed. That means you dont add the digit as a number to xValue but as a string. For example for pressing 1 you use

xValue+= "1"

If you then type in 12, you get

xValue = "12"

If the user now presses one of the other buttons, you know that this number is completed and you can convert it into a number using parseInt().