javascript loop through fields, add values and display on another field

What you want to do is best done via 'data binding'. Check out this basic example here:

var input = document.querySelector('#a');
var output = document.querySelector('p');

function update(event) {
   output.innerHTML = input.value;
}
input.addEventListener('keydown', update);
input.addEventListener('keyup', update);

We listen for key up and key down events and then change our values. Fiddle for fun.

This can be ungainly if you have a large table because we have to bind every input to it's output. Not so with ES6! Instead we still add listeners to our inputs, but we bind them all to a single JS object. That's one event listener instead of dozens of others. We do this via Object.observe.

Check it out:

var input = document.querySelectorAll('input');
var output = document.querySelectorAll('td');

input = Array.prototype.slice.call(input);

/*
Here you model out your "table" as a JS object
so that we can listen for changes more easily.
*/
var table = {
    a: '',
    b: ''
};

input.forEach(function addListeners(input) {
    //Closured! 
    function update(event) {
        table[input.id] = input.value
    }
    input.addEventListener('keydown', update);
    input.addEventListener('keyup', update);
});

//You'd have to make some more clever function.
function alphaToCell(alpha) {
    if (alpha === 'a') return 0;
    if (alpha === 'b') return 1;
}

/*
The cool thing here is that instead of binding each input to it's output, we just bind every input to a single model, and then that model knows how to update all the outputs.
*/
Object.observe(table, function (changes) {
    changes.forEach(function (change) {
        var index = alphaToCell(change.name);
        output[index].innerHTML = table[change.name];
    })
});

Fiddle for Fun.