Combining numerical values within an array using JavaScript

Question

Combining numerical values within an array using JavaScript

Below are different buttons ranging from 1 to 9 that I have:

<button type="button" onclick="calculatorNumber(1)">

When clicked, the following function is triggered:

function calculatorNumber(i) {
    myNumbers.push(i);
    var x = document.getElementById("screen").innerHTML = myNumbers.join("");

However, the function is not working as intended. For example, if I click on 3 and then 4, instead of storing them together as '34', they are stored separately at [0] and [1]. Any ideas on how to make them store as one value?

I attempted to improve the function with the following code, but it did not resolve the issue:

function calculatorNumber(i) {
    myNumbers.push(i);
    var x = document.getElementById("screen").innerHTML =  myNumbers.join(""); // joining into one without comma
    myNumbers = []; // emptying the array
    myNumbers.push(x); // pushing the new combined value back in

javascript

Answer 1

Answer №1

Forget about arrays of numbers - all you need is one single number:

theOneNumber = theOneNumber * 10 + i;

Begin with a starting value of 0.

When you press 3 => the number becomes 3

Pressing 4 => the number transforms into 34

And pressing 5 => the number changes to 345

Answer 2

Forget about arrays of numbers - all you need is one single number:

theOneNumber = theOneNumber * 10 + i;

Begin with a starting value of 0.

When you press 3 => the number becomes 3

Pressing 4 => the number transforms into 34

And pressing 5 => the number changes to 345

Answer 3

Answer №2

To maintain the sequence, make sure to enter the numbers in the correct order. It is advised to omit the following line:

myNumbers = []; //then empty the array altogether

Test run

var myNumbers = [];

function addToCalculator(i) {
    myNumbers.push(i);
    document.getElementById("screen").innerHTML =  myNumbers.join("");
}

function clear() {
    myNumbers = [];
    document.getElementById("screen").innerHTML =  "";
}

<div id="screen"></div><br>
<button type="button" onclick="addToCalculator(1)">1</button>
<button type="button" onclick="addToCalculator(2)">2</button>
<button type="button" onclick="clear()">CL</button>

Adding numbers

var myNumbers = [0], operator = [];

function addToCalculator(i) {
    myNumbers[myNumbers.length - 1] = myNumbers[myNumbers.length - 1] *10 + i;
    updateScreen();
}

function clear() {
    myNumbers[myNumbers.length - 1] = 0;
    updateScreen();
}

function add() {
    operator.push(p);
    myNumbers.push(0);
    updateScreen();
}

function p(b, a) {
    myNumbers.push(a + b);
}

function equals() {
    operator.length && operator.pop()(myNumbers.pop(), myNumbers.pop());
    updateScreen();
}

function updateScreen() {
    document.getElementById("screen").innerHTML =  myNumbers[myNumbers.length - 1];
}

<div id="screen">0</div><br>
<button type="button" onclick="addToCalculator(1)">1</button>
<button type="button" onclick="addToCalculator(2)">2</button>
<button type="button" onclick="clear()">CL</button>
<button type="button" onclick="add()">+</button>
<button type="button" onclick="equals()">=</button>

Answer 4

To maintain the sequence, make sure to enter the numbers in the correct order. It is advised to omit the following line:

myNumbers = []; //then empty the array altogether

Test run

var myNumbers = [];

function addToCalculator(i) {
    myNumbers.push(i);
    document.getElementById("screen").innerHTML =  myNumbers.join("");
}

function clear() {
    myNumbers = [];
    document.getElementById("screen").innerHTML =  "";
}

<div id="screen"></div><br>
<button type="button" onclick="addToCalculator(1)">1</button>
<button type="button" onclick="addToCalculator(2)">2</button>
<button type="button" onclick="clear()">CL</button>

Adding numbers

var myNumbers = [0], operator = [];

function addToCalculator(i) {
    myNumbers[myNumbers.length - 1] = myNumbers[myNumbers.length - 1] *10 + i;
    updateScreen();
}

function clear() {
    myNumbers[myNumbers.length - 1] = 0;
    updateScreen();
}

function add() {
    operator.push(p);
    myNumbers.push(0);
    updateScreen();
}

function p(b, a) {
    myNumbers.push(a + b);
}

function equals() {
    operator.length && operator.pop()(myNumbers.pop(), myNumbers.pop());
    updateScreen();
}

function updateScreen() {
    document.getElementById("screen").innerHTML =  myNumbers[myNumbers.length - 1];
}

<div id="screen">0</div><br>
<button type="button" onclick="addToCalculator(1)">1</button>
<button type="button" onclick="addToCalculator(2)">2</button>
<button type="button" onclick="clear()">CL</button>
<button type="button" onclick="add()">+</button>
<button type="button" onclick="equals()">=</button>

Answer 5

Answer №3

Here's a quick solution for your current issue:

 let lastIdx = listNumbers.length - 1;
 listNumbers[lastIdx] = listNumbers[lastIdx] * 10 + index;

But, the approach to handling operators is still unknown.

Answer 6

Here's a quick solution for your current issue:

 let lastIdx = listNumbers.length - 1;
 listNumbers[lastIdx] = listNumbers[lastIdx] * 10 + index;

But, the approach to handling operators is still unknown.

Answer 7

Answer №4

To combine the numbers in your array and convert them to strings as you go, simply loop through each number and concatenate it to a string.

For instance:

myNums = [1, 2, 3]
var text = '';

for (i = 0; i < myNums.length; i++) {
    text += myNums[i].toString();
}

This will result in '123'

var x = document.getElementById("screen").innerHTML = text;

You could split this into two functions:

var myNumbers = [];
text = '';

function getMyNumber(i){
    myNumbers.push(i);
    }
function getText(myNumbers){
    for (i = 0; i < myNumbers.length; i++) {
    text += myNumbers[i].toString();
    }
    }

Call these functions accordingly (loop through calling the first one, I'm not sure how you're getting input though, then call the second function with myNumbers as an argument) and display the result on your 'screen'. Both variables are global in this case.

I hope this explanation is helpful.

Answer 8

To combine the numbers in your array and convert them to strings as you go, simply loop through each number and concatenate it to a string.

For instance:

myNums = [1, 2, 3]
var text = '';

for (i = 0; i < myNums.length; i++) {
    text += myNums[i].toString();
}

This will result in '123'

var x = document.getElementById("screen").innerHTML = text;

You could split this into two functions:

var myNumbers = [];
text = '';

function getMyNumber(i){
    myNumbers.push(i);
    }
function getText(myNumbers){
    for (i = 0; i < myNumbers.length; i++) {
    text += myNumbers[i].toString();
    }
    }

Call these functions accordingly (loop through calling the first one, I'm not sure how you're getting input though, then call the second function with myNumbers as an argument) and display the result on your 'screen'. Both variables are global in this case.

I hope this explanation is helpful.

Combining numerical values within an array using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to provide a dynamic value for the p:remoteCommand ajax call?

What is the best way to establish a connection between two applications using React and Node

How can I limit the input of string values from a Node Express request query?

Data not being saved when using the Post method in a Web API

Step-by-step guide on adding and removing a row from a table with the help of jquery and node js

Strange response received from Stack Overflow API request

What is the method for setting and comparing collectionsjs equality?

The node server.js encountered an error - Module not found

Ensure data accuracy by triggering the cache - implementing SWR hook in Next.js with TypeScript

Issue encountered while constructing an array within the component data following the 'created' event

Transforming an ordinary JavaScript object into a class instance

What is the method to deactivate all events in React components using refs?

Attempting to modify background by manipulating the state in Reactjs

Using HTML and jQuery to create a table with buttons to add or remove rows is a common practice. However, there

React components are failing to display data as expected

a guide on accessing key value elements within an array using Ionic 3

The TypeScript compiler is generating node_modules and type declaration files in opposition to the guidelines outlined in the tsconfig.json file

Various ways to utilize Apollo's Query property

Ensure the camera flag remains set in three.js

A custom Mongoose schema attribute configured with distinct values