RxJS several input streams. Proper way to deal with them? - rxjs

Question

I have five inputs on my app and I want to calculate the sum of each of them in a final number.
So far I did this:
const input1 = document.querySelector("#text1");
const input2 = document.querySelector("#text2");
const input3 = document.querySelector("#text3");
const input4 = document.querySelector("#text4");
const input5 = document.querySelector("#text5");
function setObservable(selector) {
return Rx.Observable
.fromEvent(selector, "input")
.map(event => parseInt(event.target.value))
.startWith(0)
}
const input$ = setObservable(input1)
const input2$ = setObservable(input2)
const input3$ = setObservable(input3)
const input4$ = setObservable(input4)
const input5$ = setObservable(input5)
const source = Rx.Observable.combineLatest(input$, input2$, input3$, input4$, input5$)
source.subscribe(value => {
const totalHTML = document.querySelector(".total");
const total = value.reduce((acc, curr) => acc + curr, 0);
totalHTML.textContent = total;
});
Which is working fine... but is there any more elegant way to get the values of each input without specifying all of them?

Answer 1

For sure! Let's store all your selectors in an array:
const selectors = ['#text1', '#text2', '#text3', '#text4', '#text5'];
And let's map over these to get the actual elements:
const elements = selectors.map(s => document.querySelector(s));
And now let's map over these elements and get an array of Observables:
const clickStreams = elements.map(setObservable);
And finally we can combine latest (like you did before):
const click$ = Rx.Observable.combineLatest(clickStreams);