1

Estoy migrando un fragmento de código que tengo en jquery. Es el siguiente:

 $(window).scroll(function() {
    var ele = document.getElementById('holamundo');
    if(esVisible(ele)== true){
      $('.counter').each(function() {
        var $this = $(this),
        countTo = $this.attr('data-count');
        $({ countNum: $this.text()}).animate({
          countNum: countTo
        },
        {
          duration: 2000,
          easing:'linear',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        });  
      });
    }else{
    }
  });
  function esVisible(elem){
    var posTopView = $(window).scrollTop();
    var posButView = posTopView + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).outerHeight();
    return ((elemBottom < posButView && elemBottom > posTopView) || (elemTop >posTopView && elemTop< posButView));
  }

Hasta el momento he logrado pasar lo siguiente:

window.onscroll = function() {
    const ele = document.getElementById('holamundo');
    if(esVisible(ele)== true){
      document.getElementsByClassName('counter').foreach( function(element){
        countTo = element.getAttribute('data-count');
        
      });
      

    }else{

    }
   
  };

pero me arroja un error en foreach:

uncaught TypeError: document.getElementsByClassName(...).forEach is not a function

Hasta el momento esto me causa conflicto.

3 respuestas 3

3

Esto sucede porque document.getElementsByClassName() retorna un HTMLCollection, no un array.

Si en verdad deseás utilizar document.getElementsByClassName(), se puede convertir el resultado a un array:

  1. Utilizando Array.from(),
  2. Utilizando el operador spread (...)

Para el caso 1:

elementos = document.getElementsByClassName('counter')
arrayElementos = Array.from(elementos)

y el caso 2:

elementos = document.getElementsByClassName('counter')
arrayElementos = [...elementos]

A partir de esto, sí podrás utilizar el método forEach().

Como otras alternativas, se puede hacer lo que se menciona en las otras respuestas, como usar simplemente un for o hacer uso de querySelectorAll(), que retorna un NodeList, el cual sí es iterable.

4
  • muchas gracias de verdead me ayudo a entender y avanzar un poco actualizare mi pregunta ya que no comprendo nada del resto del código.
    – Gomaru
    Commented el 9 sept. 2022 a las 20:34
  • @Gomaru ¡Destruiste tu pregunta! Revierte la edición y crea una pregunta nueva (incluso puedes hacer referencia a la pregunta actual para "darle seguimiento"), ya que con el cambio que hiciste las respuestas no responden a tu pregunta actual. Por cierto, no olvides aceptar alguna de las respuestas (para que más adelante la pregunta no se relance una y otra vez al inicio).
    – padaleiana
    Commented el 9 sept. 2022 a las 20:45
  • claro como la revierto perdón ??
    – Gomaru
    Commented el 9 sept. 2022 a las 20:46
  • 1
    @Gomaru Si te fijás, al pie tu pregunta dice "editada hace x minutos". Pulsá ese enlace: luego verás que tu pregunta tiene 3 revisiones (la 3 es la actual). En la revisión anterior (la 2 en este caso), te vas a fijar que hay un enlace que dice "revertir". El pop-up te preguntará si realmente querés revertir la edición, entoncés allí debés pulsar el botón que también dice "revertir".
    – padaleiana
    Commented el 9 sept. 2022 a las 20:49
3

Si no me equivoco el error lo obtienes porque estas tratando de recorrer un objeto no iterable, tiene que ser un array o json, esto lo veo al obtener los elementos con clase counter.

Cambia: getElementsByClassName('counter')

Por: querySelectorAll('.counter')

Este genera un objeto iterable y puedes recorrerlo.

1

getElementsByClassName retorna un HTMLCollection el cual no tiene la función foreach.

Puedes hacer lo siguiente:

let elementos = document.getElementsByClassName('counter');
for (let element of elementos) {
    countTo = element.getAttribute('data-count');
}

o

document.querySelectorAll(".counter").forEach(
    function(element){
        countTo = element.getAttribute('data-count');
    }
)

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.