Sumar 2 campos por getElementById

[Bier]

Tengo una función que suma dos campos, para ello utilizo: getElementsByName. Esta función trabaja perfectamente
Ahora, deseo que esta función realice la suma por: getElementById

La razón, es que debo pasar el contenido de los campos a una segunda página, por lo que debo asignar un nombre diferentes a cada campo.
En este ejemplo he puesto 2 campos a sumar. Mi formulario real puede tener desde 2 campos hasta 100.

Mi código es el siguiente:

Código HTML:

<input name="cargo" id="abono" type="text" value=0 onKeyUp="sumar()"><br />
<input name="cargo" id="abono" type="text" value=0 onKeyUp="sumar()"><br />
<input name="suma" id="suma" type="text" readonly>
 
<script language=javascript>
function sumar() {
var suma = 0;
var valid = true;
var inputs = document.getElementsByName('cargo');
for(i =0; i < inputs.length; i++) {
if(inputs[i].value.match( /^[0]*(\d+)$/)) {
suma += parseInt(RegExp.$1);
}
else {valid=false;}
}
 
if(valid) {
document.getElementById('suma').value = suma;
}
else{
alert("Debe registrar solo numeros");
}
}
</script>
 

Gracias anticipadas.

[Bier]

Encontré este código que lo hace por Id, solo que no logro incorporarlo a la primera fucnción:

Código HTML:

<script type="text/javascript">
 
function DoSum()
{
  document.getElementById("Sum").value = 
    parseInt(document.getElementById("No1").value) + 
    parseInt(document.getElementById("No2").value) + 
    parseInt(document.getElementById("No3").value) + 
    parseInt(document.getElementById("No4").value) + 
    parseInt(document.getElementById("No5").value)
}
 
</script>
 
<input type="text" id="No1" style="width:20px" value="10"/> +
<input type="text" id="No2" style="width:20px" value="20"/> +
<input type="text" id="No3" style="width:20px" value="30"/> +
<input type="text" id="No4" style="width:20px" value="40"/> +
<input type="text" id="No5" style="width:20px" value="50"/> =
<input type="text" id="Sum" style="width:30px"/> 
<input type="button" value="Sum" onclick="DoSum()"/>