Estoy tratando de reunir todos los valores de texto de mi clase .amount en una matriz.
Sé que puedo obtener el valor del primer elemento con la clase .amount usando:
const myArray = document.getElementsByClassName('amount')[0].innerHTML; Pero quiero obtener todos los valores de todos los elementos usando .amount
Mi objetivo final es construir la suma de todos los valores usando este código:
function getArraySum(a){ const total=0; for(const i in a) { total += a[i]; } return total; } console.log(getArraySum(myArray));Soy muy nuevo en JS y también estoy abierto a otros enfoques.
Mi objetivo final es construir la suma de todos los valores usando este código:
Algunas notas:
Ese código usa for-in , que no es la forma correcta de recorrer una matriz u otro iterable (es para recorrer las propiedades del objeto). Para matrices/iterables, desea for-of . (No compatible con navegadores obsoletos como IE11).
No necesita una matriz para esto, el resultado de llamar a getElementsByClassName("amount") (o querySelectorAll(".amount") ) es iterable .
Ha dicho "suma", que es una operación matemática, por lo que deberá convertir el texto que obtiene del DOM en un número. Tienes muchas opciones para hacerlo, las analizo en esta respuesta .
textContent en lugar de innerHTML , ya que probablemente no desee el marcado de etiquetas.
No puede declarar total como const , ya que lo está agregando (modificando su valor).
Con todo eso en mente:
function getArraySum(iterable) { let total = 0; for (const element of iterable) { total += +element.textContent; } return total; } console.log(document.getElementsByClassName("amount)); Pero si primero desea obtener una matriz de números, puede hacerlo usando Array.from con su devolución de llamada de mapeo:
function getArraySum(iterable) { let total = 0; for (const value of iterable) { total += value; } return total; } const theArray = Array.from( document.getElementsByClassName("amount"), element => +element.textContent ); console.log(getArraySum(theArray));Después