1

Mi intencion es hacer una sola función y reutilizarla, no hacer 31 funciones que hagan lo mismo.

Cuando intento sumar los resultados finales me arroja NaN a menos que haga click en cada una de las celdas de la tabla para disparar la funcion y ahí si me arroja un resultado numérico.

He buscado de mil formas en la web pero no logro resolver mi poblematica.

Al final del código se encuentra todo lo codificado en JavaScript. Las variables y funciones creadas. Se puede apreciar que hay unas 31 funciones que hacen lo mismo con diferentes datos. No se como hacer una función unitaria y que vaya recibiendo los datos dependiendo de las acciones del usuario.

const precio = document.getElementsByClassName('costo');
const cantidad = document.getElementsByClassName('cantidad');
const total = document.getElementsByClassName('total');
const monto = document.getElementById('monto');

let multi = [31];

for (i = 0; i < multi.length; i++) {
  multi[i] = 0;
  for (j = 0; j < total.length; j++) {
    total[j].innerHTML = multi[i];
  }
};

function sumaTotal() {
  multi[0] = precio[0].value * cantidad[0].value;

  total[0].innerHTML = multi[0];

}


function sumaTotal2() {
  multi[1] = precio[1].value * cantidad[1].value;

  total[1].innerHTML = multi[1];

}

function sumaTotal3() {
  multi[2] = precio[2].value * cantidad[2].value;

  total[2].innerHTML = multi[2];

}

function sumaTotal4() {
  multi[3] = precio[3].value * cantidad[3].value;

  total[3].innerHTML = multi[3];

}

function sumaTotal5() {
  multi[4] = precio[4].value * cantidad[4].value;

  total[4].innerHTML = multi[4];

}

function sumaTotal6() {
  multi[5] = precio[5].value * cantidad[5].value;

  total[5].innerHTML = multi[5];

}

function sumaTotal7() {
  multi[6] = precio[6].value * cantidad[6].value;

  total[6].innerHTML = multi[6];

}

function sumaTotal8() {
  multi[7] = precio[7].value * cantidad[7].value;

  total[7].innerHTML = multi[7];

}

function sumaTotal9() {
  multi[8] = precio[8].value * cantidad[8].value;

  total[8].innerHTML = multi[8];

}

function sumaTotal10() {
  multi[9] = precio[9].value * cantidad[9].value;

  total[9].innerHTML = multi[9];

}

function sumaTotal11() {
  multi[10] = precio[10].value * cantidad[10].value;

  total[10].innerHTML = multi[10];

}

function sumaTotal12() {
  multi[11] = precio[11].value * cantidad[11].value;

  total[11].innerHTML = multi[11];

}

function sumaTotal13() {
  multi[12] = precio[12].value * cantidad[12].value;

  total[12].innerHTML = multi[12];

}

function sumaTotal14() {
  multi[13] = precio[13].value * cantidad[13].value;

  total[13].innerHTML = multi[13];

}

function sumaTotal15() {
  multi[14] = precio[14].value * cantidad[14].value;

  total[14].innerHTML = multi[14];

}

function sumaTotal16() {
  multi[15] = precio[15].value * cantidad[15].value;

  total[15].innerHTML = multi[15];

}

function sumaTotal17() {
  multi[16] = precio[16].value * cantidad[16].value;

  total[16].innerHTML = multi[16];

}

function sumaTotal18() {
  multi[17] = precio[17].value * cantidad[17].value;

  total[17].innerHTML = multi[17];

}

function sumaTotal19() {
  multi[18] = precio[18].value * cantidad[18].value;

  total[18].innerHTML = multi[18];

}

function sumaTotal20() {
  multi[19] = precio[19].value * cantidad[19].value;

  total[19].innerHTML = multi[19];

}

function sumaTotal21() {
  multi[20] = precio[20].value * cantidad[20].value;

  total[20].innerHTML = multi[20];

}

function sumaTotal22() {
  multi[21] = precio[21].value * cantidad[21].value;

  total[21].innerHTML = multi[21];

}

function sumaTotal23() {
  multi[22] = precio[22].value * cantidad[22].value;

  total[22].innerHTML = multi[22];

}

function sumaTotal24() {
  multi[23] = precio[23].value * cantidad[23].value;

  total[23].innerHTML = multi[23];

}

function sumaTotal25() {
  multi[24] = precio[24].value * cantidad[24].value;

  total[24].innerHTML = multi[24];

}

function sumaTotal26() {
  multi[25] = precio[25].value * cantidad[25].value;

  total[25].innerHTML = multi[25];

}

function sumaTotal27() {
  multi[26] = precio[26].value * cantidad[26].value;

  total[26].innerHTML = multi[26];

}

function sumaTotal28() {
  multi[27] = precio[27].value * cantidad[27].value;

  total[27].innerHTML = multi[27];

}

function sumaTotal29() {
  multi[28] = precio[28].value * cantidad[28].value;

  total[28].innerHTML = multi[28];

}

function sumaTotal30() {
  multi[29] = precio[29].value * cantidad[29].value;

  total[29].innerHTML = multi[29];

}

function sumaTotal31() {
  multi[30] = precio[30].value * cantidad[30].value;

  total[30].innerHTML = multi[30];

}

function calcularTotal() {

  let suma = 0

  for (var i = 0; i < multi.length; i++) {
    suma += multi[i];
  }



  //var suma=multi[0]+multi[1]+multi[2]+multi[3]+multi[4]+multi[5]+multi[6]+multi[7]+multi[8]+multi[9]+multi[10]+multi[11]+multi[12]+multi[13]+multi[14]+multi[15]+multi[16]+multi[17]+multi[18]+multi[19]+multi[20]+multi[21]+multi[22]+multi[23]+multi[24]+multi[25]+multi[26]+multi[27]+multi[28]+multi[29]+multi[30];

  monto.innerHTML = suma;

}
<div class="pedido">


  <table border="1" style="width: 100%">
    <caption>Orden de pedido</caption>
    <colgroup>
      <col style="width: 40%">
      <col style="width: 20%">
      <col style="width: 20%">
      <col style="width: 20%">
    </colgroup>
    <tr>
      <th>Salmón</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Philadelphia Roll</td>
      <td>
        <input class="costo" id="phila" type="text" value="530" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal()">
      </td>
      <td>
        <h2 class="total"><input type="text"></h2>
      </td>
    </tr>
    <tr>
      <td>Philadelphia Fraise</td>
      <td>
        <input id="philafraise" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal2()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Philadelphia Especial</td>
      <td>
        <input id="philaesp" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal3()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Philadelphia Mediterrané</td>
      <td>
        <input id="philamedi" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal4()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Philadelphia Gravlax</td>
      <td>
        <input id="philagrav" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal5()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Kappa Roll</td>
      <td>
        <input id="kappa" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal6()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <th>Atún</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Tuna Roll</td>
      <td>
        <input id="tuna" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal7()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Maki Tuna</td>
      <td>
        <input id="makituna" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal8()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <th>Langostinos</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Dragon Roll</td>
      <td>
        <input id="dragon" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal9()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Ebikura Roll</td>
      <td>
        <input id="ebikura" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal10()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <th>Kanikama</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>California Roll</td>
      <td>
        <input id="california" class="costo" type="text" value="450" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal11()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Tataki Roll</td>
      <td>
        <input id="tataki" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal12()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <th>Otros (pescado blanco-pollo)</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>El Taco Roll</td>
      <td>
        <input id="taco" class="costo" type="text" value="470" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal13()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Pulpito Roll</td>
      <td>
        <input id="pulpito" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal14()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <th>Vegetarianos</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Maki Vegetariano</td>
      <td>
        <input id="makiveg" class="costo" type="text" value="450" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal15()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Ratatouille Roll</td>
      <td>
        <input id="rata" class="costo" type="text" value="450" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal16()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Iskebech Roll</td>
      <td>
        <input id="iskebech" class="costo" type="text" value="450" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal17()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Kakiague Roll</td>
      <td>
        <input id="kakiague" class="costo" type="text" value="450" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal18()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <th>Calientes</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Zucchini Roll</td>
      <td>
        <input id="zucchini" class="costo" type="text" value="500" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal19()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Tiger Roll</td>
      <td>
        <input id="tiger" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal20()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Ebi Kroc</td>
      <td>
        <input id="ebi" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal21()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <th>Combinados</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Combinado 20</td>
      <td>
        <input id="combo20" class="costo" type="text" value="1350" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal22()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Combinado 30</td>
      <td>
        <input id="combo30" class="costo" type="text" value="1800" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal23()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Combinado MyJ 1</td>
      <td>
        <input id="myj1" class="costo" type="text" value="1100" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal24()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Combinado MyJ 2</td>
      <td>
        <input id="myj2" class="costo" type="text" value="1100" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal25()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <th>Varios</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Niguiris</td>
      <td>
        <input id="niguiris" class="costo" type="text" value="650" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal26()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Sashimi</td>
      <td>
        <input id="sashimi" class="costo" type="text" value="700" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal27()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Langostinos con panko</td>
      <td>
        <input id="panko" class="costo" type="text" value="400" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal28()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <th>Vinos</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Blanco Dulce</td>
      <td>
        <input id="dulce" class="costo" type="text" value="400" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal29()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Blanco Chardonnay</td>
      <td>
        <input id="chardo" class="costo" type="text" value="500" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal30()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <td>Tinto Malbec</td>
      <td>
        <input id="malbec" class="costo" type="text" value="400" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onclick="sumaTotal31()">
      </td>
      <td>
        <h2 class="total"></h2>
      </td>
    </tr>
    <tr>
      <th>Total</th>
      <td colspan="3">
        <h2 id="monto"></h2>
      </td>
    </tr>
  </table>

  <input class="impr-calc" type="button" value="Imprimir" onclick="javascript:window.print()" />

  <input class="impr-calc" type="button" value="Calcular" onclick="calcularTotal()">
</div>
</div>

3
  • Por favor, resume tu código, añade las partes específicas en las que se genera el error el 13 ene. 2021 a las 18:40
  • Los valores de elementos de formulario siempre son cadenas, debes convertir a entero para solucionar el problema, por ejemplo: multi[0] = parseInt(precio[0].value) * parseInt(cantidad[0].value);
    – Triby
    el 13 ene. 2021 a las 19:31
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! Recuerda aceptar la respuesta que te sirvio!
    – gbianchi
    el 15 ene. 2021 a las 13:54

1 respuesta 1

2

El primer cambio que hice en tu código fue cambiar el evento onclick que tenías en los input.cantidad por un evento onchange. Debes recordar que cuando se desea ejecutar una función al cambiar el valor de un elemento de formulario se debe usar onchange.

Luego de esto, apunté todos los onchange de los input.cantidad a una única función, enviándole como parámetro this, es decir, el elemento como tal.

Para evitar ese ciclo for que hacías al principio de tu código JavaScript simplemente añadí el valor por defecto, osea el valor 0, a los elementos h2.total directamente en el HTML.

Explicación de la función:

  1. Para definir la variable costo simplemente capturé el padre tr del elemento usando el método closest(). (recordemos que el elemento es el input.cantidad sobre el cual se detectó el cambio de valor). Luego de capturar al elemento padre tr, se hace un querySelector sobre el mismo para capturar el elemento input.costo y a este se le captura su valor. El valor capturado se convierte en número usando el método parseInt().

  2. Para definir la variable cantidad simplemente se toma el elemento sobre el cual se detectó el cambio de valor y se le captura dicho valor. El valor capturado se convierte en número usando el método parseInt().

  3. La variable total entonces es simplemente la multiplicación entre las variables costo y cantidad.

  4. Luego de tener el resultado de la variable total se vuelve a seleccionar el padre tr del elemento con el fin de capturar el emeneto h2.total de la fila correspondiente e imprimir el valor de la variable total.

Con estos ajustes la función se vuelve dinámica para cualquiera de las filas de la tabla.

Finalmente, para saber el valor total, se seleccionan todos los elementos h2.total del documento, se recorren en un ciclo forEach y por cada iteración se suma el valor actual al valor guardaro en la iteración anterior.

function sumaTotal(elemento) {
  let costo = parseInt(elemento.closest('tr').querySelector(".costo").value);
  let cantidad = parseInt(elemento.value);

  let total = (costo * cantidad);
    
  elemento.closest('tr').querySelector(".total").innerHTML = total;
}

function calcularTotal() {
  let suma = 0;

  document.querySelectorAll(".total").forEach((item) => {
      suma = (parseInt(suma) + parseInt(item.innerHTML))
  });

  document.querySelector("#monto").innerHTML = suma;
}
<div class="pedido">
  <table border="1" style="width: 100%">
    <caption>Orden de pedido</caption>
    <colgroup>
      <col style="width: 40%">
      <col style="width: 20%">
      <col style="width: 20%">
      <col style="width: 20%">
    </colgroup>
    <tr>
      <th>Salmón</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Philadelphia Roll</td>
      <td>
        <input class="costo" id="phila" type="text" value="530" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Philadelphia Fraise</td>
      <td>
        <input id="philafraise" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Philadelphia Especial</td>
      <td>
        <input id="philaesp" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Philadelphia Mediterrané</td>
      <td>
        <input id="philamedi" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Philadelphia Gravlax</td>
      <td>
        <input id="philagrav" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Kappa Roll</td>
      <td>
        <input id="kappa" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <th>Atún</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Tuna Roll</td>
      <td>
        <input id="tuna" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Maki Tuna</td>
      <td>
        <input id="makituna" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <th>Langostinos</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Dragon Roll</td>
      <td>
        <input id="dragon" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Ebikura Roll</td>
      <td>
        <input id="ebikura" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <th>Kanikama</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>California Roll</td>
      <td>
        <input id="california" class="costo" type="text" value="450" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Tataki Roll</td>
      <td>
        <input id="tataki" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <th>Otros (pescado blanco-pollo)</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>El Taco Roll</td>
      <td>
        <input id="taco" class="costo" type="text" value="470" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Pulpito Roll</td>
      <td>
        <input id="pulpito" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <th>Vegetarianos</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Maki Vegetariano</td>
      <td>
        <input id="makiveg" class="costo" type="text" value="450" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Ratatouille Roll</td>
      <td>
        <input id="rata" class="costo" type="text" value="450" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Iskebech Roll</td>
      <td>
        <input id="iskebech" class="costo" type="text" value="450" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Kakiague Roll</td>
      <td>
        <input id="kakiague" class="costo" type="text" value="450" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <th>Calientes</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Zucchini Roll</td>
      <td>
        <input id="zucchini" class="costo" type="text" value="500" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Tiger Roll</td>
      <td>
        <input id="tiger" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Ebi Kroc</td>
      <td>
        <input id="ebi" class="costo" type="text" value="550" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <th>Combinados</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Combinado 20</td>
      <td>
        <input id="combo20" class="costo" type="text" value="1350" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Combinado 30</td>
      <td>
        <input id="combo30" class="costo" type="text" value="1800" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Combinado MyJ 1</td>
      <td>
        <input id="myj1" class="costo" type="text" value="1100" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Combinado MyJ 2</td>
      <td>
        <input id="myj2" class="costo" type="text" value="1100" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <th>Varios</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Niguiris</td>
      <td>
        <input id="niguiris" class="costo" type="text" value="650" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Sashimi</td>
      <td>
        <input id="sashimi" class="costo" type="text" value="700" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Langostinos con panko</td>
      <td>
        <input id="panko" class="costo" type="text" value="400" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <th>Vinos</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Blanco Dulce</td>
      <td>
        <input id="dulce" class="costo" type="text" value="400" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Blanco Chardonnay</td>
      <td>
        <input id="chardo" class="costo" type="text" value="500" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <td>Tinto Malbec</td>
      <td>
        <input id="malbec" class="costo" type="text" value="400" readonly>
      </td>
      <td>
        <input class="cantidad" type="number" value="0" min="0" pattern="^[0-9]+" placeholder="Ingrese la cantidad" onchange="sumaTotal(this)">
      </td>
      <td>
        <h2 class="total">0</h2>
      </td>
    </tr>
    <tr>
      <th>Total</th>
      <td colspan="3">
        <h2 id="monto"></h2>
      </td>
    </tr>
  </table>

  <input class="impr-calc" type="button" value="Imprimir" onclick="javascript:window.print()" />

  <input class="impr-calc" type="button" value="Calcular" onclick="calcularTotal()">
</div>

2
  • 1
    te agradezco un montón la ayuda que genio. Me funcionó perfectamente. Mejor explicado imposible. el 14 ene. 2021 a las 15:56
  • @luishernandez Excelente, me alegra que fue la solución. Considera marcar la respuesta como aceptada para que sirva a otros desarrolladores que lleguen a tener un problema similar. Saludos. el 14 ene. 2021 a las 16:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.