Combining two-digit values

Question

Combining two-digit values

As a newcomer to JavaScript, I've been working on creating a basic calculator to practice my skills. However, I've run into an issue. When entering a double-digit number, the calculator is adding the digits together instead of treating them as separate numbers. For example, inputting 12 + 5 results in the answer 8. I'm struggling to resolve this problem and would appreciate any suggestions or guidance. Thanks for your help! PS: Sorry for the lengthy explanation. `


            </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();
            }
        }

`

javascript variables

Answer 1

Answer №1

Latest Update

After some feedback from @Ryan regarding my suggestion of using eval, I understand the concerns raised. While I still believe that eval can be used safely in certain controlled scenarios, it should always be approached with caution. For more insights on this debate, you can check out a related discussion on Stack Overflow.

However, a great alternative approach was suggested by @yckart, which leads me to make a new recommendation.

We can modify the compute function as follows:

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

This way, we eliminate the need for complex calculation logic. Implementing a full-fledged recursive descent parser would indeed be quite challenging.

In response to your query about handling operations like square roots and squares: both eval and the Function method support any valid JavaScript expressions, including:

Math.sqrt(number) for calculating square roots
Math.pow(number, 2) for squaring a number

Code 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

Latest Update

After some feedback from @Ryan regarding my suggestion of using eval, I understand the concerns raised. While I still believe that eval can be used safely in certain controlled scenarios, it should always be approached with caution. For more insights on this debate, you can check out a related discussion on Stack Overflow.

However, a great alternative approach was suggested by @yckart, which leads me to make a new recommendation.

We can modify the compute function as follows:

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

This way, we eliminate the need for complex calculation logic. Implementing a full-fledged recursive descent parser would indeed be quite challenging.

In response to your query about handling operations like square roots and squares: both eval and the Function method support any valid JavaScript expressions, including:

Math.sqrt(number) for calculating square roots
Math.pow(number, 2) for squaring a number

Code 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 3

Answer №2

Each time a button is pressed, the xvalue and yvalue increase by the corresponding digit assigned to that button. For instance, if you enter 12, xvalue will first increase by 1 and then by 2.

Note

xValue+=n

Adding n to xvalue increases it by n. This can also be expressed as

xValue=xValue+ n

which may be more recognizable to some users.

Answer 4

Each time a button is pressed, the xvalue and yvalue increase by the corresponding digit assigned to that button. For instance, if you enter 12, xvalue will first increase by 1 and then by 2.

Note

xValue+=n

Adding n to xvalue increases it by n. This can also be expressed as

xValue=xValue+ n

which may be more recognizable to some users.

Answer 5

Answer №3

It is important to treat user input as strings until specific operators are pressed (+, -, *, /). This means that digits should be added to the xValue variable as strings. For instance, pressing 1 would be represented as:

xValue += "1"

If the user then enters 12, the xValue becomes:

xValue = "12"

Once the user presses one of the specified operation buttons, it indicates that the number is complete and can be converted into a numeric value using parseInt().

Answer 6

It is important to treat user input as strings until specific operators are pressed (+, -, *, /). This means that digits should be added to the xValue variable as strings. For instance, pressing 1 would be represented as:

xValue += "1"

If the user then enters 12, the xValue becomes:

xValue = "12"

Once the user presses one of the specified operation buttons, it indicates that the number is complete and can be converted into a numeric value using parseInt().

Combining two-digit values

Answer №1

Answer №2

Answer №3

Similar questions

How can a static website incorporate a local image without the need for backend functionality?

Obtaining a unique diamond pattern overlay on my Google Map

Optimize my webpage for a specific location

Looking for a way to store data in a sub-document in MongoDB? I am having an issue where my farm sub-documents

Is the ID Column in the Minimal Material Table Demo not appearing as expected?

Styling Table Headers with JavaScript and CSS

How can I pass a value as an attribute from an Angular template to a directive?

Webpage video stalling due to buffering

What is the process of generating a dynamic card/button element on an ASP.net webpage using information from the backend database?

Adding a line break in a Buefy tooltip

Retrieve the duplicated items from an array by comparing two specific properties in JavaScript

retrieving the webpage's HTML content from the specified URL using AngularJS

Other Components take turns submitting the form in one Component

Adonis 5 and Vue encountering the error message 'E_ROUTE_NOT_FOUND'

Is it possible to swap a <div> element with the content of another HTML page using the .innerHTML method?

When the function is executed, the error message "obtaining ID

Find elements that are not contained within an element with a specific class

Implementing access restrictions for modules in NodeJS

Tips on how to engage in a spontaneous audio experience

Issue with Bootstrap Navbar dropdown functionality not functioning correctly in browsers, but working fine on Codepen