CODEWITHSUNDEEP
javascripthtmlarrays
rrrfusco
rrrfusco

Reputation: 1119

Sum selected values in html

I'm writing a simple calculator that adds up a continuous stream of numbers on an HTML page limited to 100 nodes at any time.

I can select the nodes on the current page with: 

var els = document.querySelectorAll('span.class');
var len = els.length;
arr = [];
for (var i=0; i < len; i++) {
      var no = els[i].innerHTML;
      arr.push(no);
}
console.log(no);


Here's what I've been exploring, maybe you can suggest a simpler or improved method?

 1. Select values, push into an array.
 2. Store array in a cookie, or htmllocalstorage
 3. every 5 seconds, push new values into 2nd array.
 4. Read 1st array and compare to 2nd array.
 5. create new array. sum values. store new array.

I've been having trouble comparing the values with loops. Is there a splice function for 2 arrays with overlapping values?

In the example below, the desired array would be: [1,2,3,2,1,8,7]

var arr1 = ['1','2','3','2','1'];
var arr2 = ['3','2','1','8','7']; // the first two values are now truncated off because current line is 102
var arr3 = [];

for(i=0; i<arr1.length; i++)
{
  for (j=0; j<arr2.length; j++)
  {
    // number exists in both arrays
    // next number is next index
    if (arr1[i] == arr2[j] && arr1[i+1] == arr2[j+1] && arr1[i+2] == arr2[j+2]) 
    {
      arr3.push(arr1[i]);
      //console.log(arr1[i]+ ' '+arr2[j] + 'true ' + arr1[i+1] + ' ' + arr2[j+1]+ arr1[i+2] + ' ' + arr2[j+2]);
    }
    else
    {
      //arr3 = [];
      //console.log(arr1[i]+ ' '+arr2[j] + ' false');
    }
  }
}
var end = arr3[0]-1;
var arr4 = arr1.slice(0,end);
var arr5 = arr4.concat(arr2);
//console.log(arr5);

var total=0;
for (k=0;k<arr5.length; k++)
{
total += parseInt(arr5[k]);
}
console.log(total);

Upvotes: 2

Views: 206

Answers (2)

tewathia
tewathia

Reputation: 7298

You can do this by comparing values starting from the end of the first array, with the corresponding values in the second array. If the common chunk(['3','2','1'] in your example) matches exactly, that is to say that the first n(=chunk.length) values in the second array and the last n values in the first array are identical, then you can concatenate the two arrays to get the overlapped result.

function overlap(a, b) {
    var counter = a.length - 1;
    var startingIndex = b.indexOf(a[counter]);
    while (b[--startingIndex] == a[--counter]) {}
    if (startingIndex == -1) {
        return a.slice(0, counter + 1).concat(b);
    } else {
        return a.concat(b);
    }
}

DEMO

Upvotes: 1

iamjt
iamjt

Reputation: 79

It looks like you are trying to remove overlapping elements at the start of the second array.

Maybe you can compare sub-strings instead of array elements.

consider these strings

var input1 = "1,2,3,2,1";
var input2 = "3,2,1,8,7";

If you can create a loop to generate the substring "3,2,1" , you can just replace the input and get rid of the first 3 numbers to get this string "8,7"

Concatenate the strings and do what you need to get your array.

Upvotes: 1

Related Questions