How to get total sum result from 2 array and split into multiple input?

Question

Well im still new into javascript and need some help about getting total sum of 2 select which each option having different array. Plus, the total sum will be shown at multiple input. (I dont know what is this method called).

I tried and google alot still does not works and I know some code is missing. That Output1 and Output2 just to check that they are calling the array.

<select id="firstselect" onchange="total()">
<option value="0"> Choose </option>
<option value="1"> Option A </option>
<option value="2"> Option B </option>
</select>

<select id="secondselect" onchange="total()">
<option value="0"> Choose </option>
<option value="1"> Option D </option>
<option value="2"> Option E </option>
</select>

<p id="output1"></p> 
<p id="output2"></p>


<input id="inputA" disabled> INPUT A </input> 
<input id="inputB" disabled> INPUT B </input> 
<input id="inputC" disabled> INPUT C </input>
<input id="inputD" disabled> INPUT D </input> 
<input id="inputE" disabled> INPUT E </input> 
<input id="inputF" disabled> INPUT F </input>


var inputA = document.getElementById("inputA");
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var inputD = document.getElementById("inputD");
var inputE = document.getElementById("inputE");
var inputF = document.getElementById("inputF");

//FIRSTSELECT   0=inputA, 1=inputB 2=inputC 3=inputD 4=inputE 5=inputF  
var value1 = [0,1,2,3,4,5];
var value2 = [1,2,3,4,5,6]; 

//SECONDSELECT  0=inputA, 1=inputB 2=inputC 3=inputD 4=inputE 5=inputF  
var value3 = [2,3,4,5,6,7];
var value4 = [3,4,5,6,7,8]; 

function fs1() {
var fs = document.getElementById('firstselect').value;
if(fs == 0) {fs = 0;}
if(fs == 1) {fs = value1;}
if(fs == 2) {fs = value2;}
document.getElementById("output1").innerHTML = fs ;
return fs;
inputA.value = fs[0];
inputB.value = fs[1];
inputC.value = fs[2];
inputD.value = fs[3];
inputE.value = fs[4];
inputF.value = fs[5];
}
function ss1(){
var ss = document.getElementById('secondselect').value;
if(ss == 0) {ss = 0;}
if(ss == 1) {ss = value3;}
if(ss == 2) {ss = value4;}  
document.getElementById("output2").innerHTML = ss;
return ss;
inputA.value = ss[0];
inputB.value = ss[1];
inputC.value = ss[2];
inputD.value = ss[3];
inputE.value = ss[4];
inputF.value = ss[5];
}
function total(){
var total = parseInt(fs1()) + parseInt(ss1());
}

The result should be like this : inputA.value = fs[0] + ss[0], inputB.value = fs[1] + ss[1] and it goes until [5]

Answer 1

If I understood your question correctly, I hope it fits It works!

 //FIRSTSELECT 0=inputA, 1=inputB 2=inputC 3=inputD 4=inputE 5=inputF var value1 = [0,1,2,3,4,5]; var value2 = [1,2,3,4,5,6]; //SECONDSELECT 0=inputA, 1=inputB 2=inputC 3=inputD 4=inputE 5=inputF var value3 = [2,3,4,5,6,7]; var value4 = [3,4,5,6,7,8]; function ss(){ var ss = document.getElementById('secondselect').value; if(ss == 0) {ss = 0;} if(ss == 1) {ss = value3;} if(ss == 2) {ss = value4;} document.getElementById("output2").innerHTML = ss; return ss; } function fs1() { var fs = document.getElementById('firstselect').value; if(fs == 0) {fs = 0;} if(fs == 1) {fs = value1;} if(fs == 2) {fs = value2;} document.getElementById("output1").innerHTML = fs ; return fs; } function total(){ debugger; var fs=fs1(); var ss1=ss(); var arrResult=[]; if(fs && fs.length>0 && ss1 && ss1.length>0 ){ for (var i = 0; i < 6; i++) { arrResult.push(+fs[i] + +ss1[i]) } } var inputA = document.getElementById("inputA"); var inputB = document.getElementById("inputB"); var inputC = document.getElementById("inputC"); var inputD = document.getElementById("inputD"); var inputE = document.getElementById("inputE"); var inputF = document.getElementById("inputF"); inputA.value = arrResult[0]?arrResult[0]:''; inputB.value = arrResult[1]?arrResult[1]:''; inputC.value = arrResult[2]?arrResult[2]:''; inputD.value = arrResult[3]?arrResult[3]:''; inputE.value = arrResult[4]?arrResult[4]:''; inputF.value = arrResult[5]?arrResult[5]:''; } 

 <select id="firstselect" onchange="total()"> <option value="0"> Choose </option> <option value="1"> Option A </option> <option value="2"> Option B </option> </select> <select id="secondselect" onchange="total()"> <option value="0"> Choose </option> <option value="1"> Option D </option> <option value="2"> Option E </option> </select> <p id="output1"></p> <p id="output2"></p> <input id="inputA" disabled> INPUT A </input> <input id="inputB" disabled> INPUT B </input> <input id="inputC" disabled> INPUT C </input> <input id="inputD" disabled> INPUT D </input> <input id="inputE" disabled> INPUT E </input> <input id="inputF" disabled> INPUT F </input>