Subscribe to and process change to multiple inputs

Question

I want to add an event listener to input elements with element id's I have stored in a list and then take the product of them. For example:

a = ['id1', 'id2', 'id3']

I would like to do something like:

input element id1 = 0.5
input element id2 = 0.6
input element id3 = 1.0
return 0.5*0.6*1

and I would like this to update as the user changes the values in the input box.

So I have started with something like:

function calcProduct(values){
    var product = 1;
    for(i=0; values.length; i++){
        product = product*values[i];
    }
    return product
}

id_list = ['id1', 'id2', 'id3']
function calcProduct(id_list){
    for(i=0; id_list.length; i++){
        //how do I get the values as they change so I can feed it to calcProduct?
        document.getElementById(id_list[i]).addEventListener("onchange", calcProduct(values) )
    }
}

user_1772933 · Answer

Using an event listener and reduce() you can accumulate the final product. Note: in an event listener, omit the 'on', so use change rather than onchange. To make it easier, I used a className for inputs that will be calculated

window.addEventListener('load', () => {
  document.querySelectorAll('.to-calc').forEach(el => el.addEventListener('change', calcProduct))
  calcProduct()
})

function calcProduct(e) {
  let output = [...document.querySelectorAll('.to-calc')].reduce((b, a) => b * +a.value, 1)
  console.log(output.toFixed(2))
  return output.toFixed(2)
}

user_1244884 · Answer

I would combine event delegation and reactive programming for this.

Attach your event listener to a parent node and filter the events as they come in:

When an input event is dispatched the parent
catches it.
The filter operator makes sure we consume the right events.
The scan operator writes new values to the map.
The map operator multiplies the values in the map.
Finally the subscriber receives and displays the product.

This way we can work with multiple sets of numbers.
(Note how the map corresponds to ids and values in the DOM.)

const mult = nums =>
  fromEvent(document.querySelector('div'), 'input')                       //1
  .pipe( filter(e => e.target.id in nums)                                 //2
       , scan((acc, {target: {id, value}}) => (acc[id]=value, acc), nums) //3
       , map(ns => Object.values(ns).reduce((p, n) => p * n, 1)));        //4

mult({n1: 1, n2: 1, n3: 1}).subscribe(display('#p1'));                    //5
mult({n4: 1, n5: 1, n6: 1}).subscribe(display('#p2'));                    //5
mult({n7: 1, n8: 1, n9: 1}).subscribe(display('#p3'));                    //5

input{width:30px}

Subscribe to and process change to multiple inputs

2 Answers