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

Create dynamic automatic titles in HTML with JavaScript

How come certain rectangles vanish when one rectangle completely fills the space?

Learn the process of uploading a file using FormData alongside multer in node js. Experience the issue of receiving undefined in req.file and { } in req.body

Troubleshooting Issues with Form Inputs in JS/Angular Using Places API and document.getElementById Method

Having difficulty adding a custom library from a repository into an Ember project as a dependency

What is the best method to determine the mean score by utilizing the ID values obtained from API responses?

Method in Vue.js is returning an `{isTrusted: true}` instead of the expected object

Can you explain the distinctions among <Div>, <StyledDiv>, and <Box sx={...}> within the MUI framework?

Is the ng-style not displaying the background image with the interpolated value?

Display a custom error message containing a string in an Angular error alert

Exploring the intricacies of Knockout JS mapping nested models using fromJS function

Having trouble with the express message! I can't seem to access the template I created

Rails application experiencing difficulties in displaying the Raty JS plugin

What steps should I take to make sure that the types of React props are accurately assigned?

"How to dynamically fill a text input field from a table using jQuery when a specific value is selected, potentially involving multiple rows (possibly

What is the best way to apply absolute positioning to an image tag that is related to

Tips for creating fonts that adjust depending on the length of characters

Is it possible to remove the address bar from appearing on a browser when a page loads?

Instructions for incorporating highcharts sub modules into a React application

Is it possible to customize the selected color of the Chip component?