0

Mi consulta es la siguiente, tengo una variable:

var tdElem = document.getElementById(product-${j + 1}-subtotal).innerText;

Que obtiene los valores almacenados en un td, dichos valores se obtienen desde un bucle. Tengo que imprimir en pantalla lo que seria un subtotal

sub.innerHTML += <td class="subtotal" id="subtotal"> $ ${(tdElem)} </td>

Entonces tengo que sumar esos dos valores, (los valores que me retorna son: 200 y 500000, o se que tendría que imprimir en pantalla 500200) ya extraje solo los números con lo siguiente:

tdElem = tdElem.replace(/\D/g,'');

El tema es que están contenidos en una misma variable y no se como sumarlos. No se si me explico, les dejo el código JavaScript.

for (let j = 0; j < carrito.articles.length; j++) {
  let cart = carrito.articles[j];

  let disminuirBtn = document.getElementById(`disminuir-${j + 1}`);
  let aumentarBtn = document.getElementById(`aumentar-${j + 1}`);
  let cantidad = document.getElementById(`cantidad-${j + 1}`);
  let subtotal = document.getElementById(`product-${j + 1}-subtotal`);
  let del = document.getElementById(`product-${j + 1}`)
  let trash = document.getElementById(`delete-${j + 1}`);
  trash.addEventListener("click", () => {
    del.innerHTML = "";
  })

  // Se llama a la funcion para que cargue los costos que ya vienen en el json.
  actualizarSubtotal(subtotal, cart.unitCost, cantidad.value, cart.currency);
  sub = document.getElementById("subtotal");
  var tdElem = document.getElementById(`product-${j + 1}-subtotal`).innerText;
  console.log(tdElem);
  tdElem = tdElem.replace(/\D/g,'');
  sub.innerHTML += `<td class="subtotal" id="subtotal"> $ ${(tdElem)} </td>`

  // Se le pasan los paramentros que consisten en cantidad (input), costo por unidad, elemento subtotal y la moneda.
  disminuirBtn.addEventListener('click', () => disminuir(cantidad, cart.unitCost, subtotal, cart.currency));
  aumentarBtn.addEventListener('click', () => aumentar(cantidad, cart.unitCost, subtotal, cart.currency));
}
})
6
  • Agrega el html de ejemplo donde están esos dos números para buscar otra forma de separarlos.
    – Lobos
    Commented el 12 oct. 2020 a las 16:07
  • Esos dos numeros se obtienen desde un json, por eso el bucle. Commented el 12 oct. 2020 a las 16:24
  • Solo agrega el valor de tdElem antes de hacer el reemplazo.
    – Lobos
    Commented el 12 oct. 2020 a las 16:29
  • Disculpa pero no entendi. Podrias brindar un ejemplo por favor Commented el 12 oct. 2020 a las 16:33
  • Modifiqué tu pregunta y agregué un console.log(tdElem). Agrega eso en tu código, ejecútalo y agrega lo que se imprimió en la consola para ver el contenido de tdElem y buscar la forma de separar los números.
    – Lobos
    Commented el 12 oct. 2020 a las 16:38

1 respuesta 1

0

Agrego ejemplo donde se suman los valores de la columna y se coloca al final el total. Basado en la estructura de la tabla de ejemplo.

function actualizarSubTotales() {
  // actualizar los subtotales
  for (i = 1; i <= 2; i++) {
    document.getElementById(`a${i}`).innerHTML = `${Math.round(
      Math.random() * 1000,
      0
    )}`;
  }

  // luego de actualizar llamar la función sumar
  // para actualizar el total
  sumar();
}

function sumar() {
  let total = 0;

  // recorrer todos los td
  for (i = 1; i <= 2; i++) {
    let tdElem = document.getElementById(`a${i}`).innerHTML;
    // dejar solo los digitos y multiplicar por 1 para convertirlo
    // en tipo number
    tdElem = tdElem.replace(/\D/g, "") * 1;

    total += tdElem;

    // agregar nuevo subtotal
    document.getElementById(`subtotal`).innerHTML = `$${total}`;
  }
}
// suma inicial
sumar();
<button onclick="actualizarSubTotales()">Actualizar sub totales</button>

<table border="1">
  <tr>
      <td id="a1">$200</td>
  </tr>
  <tr>
      <td id="a2">$500000</td>
  </tr>
  <tr>
      <td id="subtotal">0</td>
  </tr>

5
  • Muchas gracias! Me sirvio, lo hice sin el bucle, ahora, otra consulta y si los td son dinamicos? Es decir yo tengo una funcion que me va actualizando los subtotales a medida que aumento o disminuyo la cantidad y eso tambien lo quiero ver reflejado en el subtotal y total adjunto la funcion de la que hablo function actualizarSubtotal(subtotalActualizar, precioUnitario, cantidad, moneda) { if (moneda == 'USD') { subtotalActualizar.innerHTML = "$" + (precioUnitario * 40) * cantidad; } else { subtotalActualizar.innerHTML = "$" + " " + precioUnitario * cantidad; } } Commented el 12 oct. 2020 a las 21:32
  • Dentro de la función actualizarSubTotal() se puede llamar la función que actualiza el total, y cada vez que los subtotales se actualicen lo hará el total. Agregué un ejemplo.
    – Lobos
    Commented el 12 oct. 2020 a las 22:08
  • Muchas gracias por tanta ayuda, pude lograr mi cometido, tengo un ultimo problema, al momento de darle al boton de aumentar me suma el valor que ya tenia mas el nuevo valor, es decir, si tengo un articulo que vale 100 y le sumo 1 mas en vez de quedarme 200 me queda 300, que podra ser? Commented el 13 oct. 2020 a las 11:09
  • function suma(subtotal) { sub = subtotal.innerHTML sub = sub.replace(/\D/g, "") * 1 subSuma = document.getElementById("subtotal").innerHTML; subSuma = subSuma.replace(/\D/g, '') * 1 subSuma += sub document.getElementById("subtotal").innerHTML = <td class="subtotal" id="subtotal"> $ ${subSuma} </td> total.innerHTML = <td class="price-total" id="total"> $ ${subSuma}</td> } Esta es la funcion que utilizo. Commented el 13 oct. 2020 a las 11:10
  • Hay que revisar el proceso, ese comportamiento sugiere que primero se incrementa el subtotal y luego se vuelve a incrementar con la función suma. Basándome en el ejemplo que puse, la función suma() recorre todos los subtotales y al final muestra el total, es una función independiente. En tu ejemplo suma(subtotal) recibe un parámetro, imagino que por ahí puede estar el problema. No puedo saber más que eso ya que desconozco la lógica completa.
    – Lobos
    Commented el 13 oct. 2020 a las 15:05

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.