For loop is only printing the last value


#1

The for loop is only printing the last value… how come?

Here is my code:

class LetterAnimations{
    constructor(domElement){

        let domEl = domElement;

        this.implementDomElement(domEl);

    }

    implementDomElement(domElement){

        console.log(domElement);

       let splitDomElement = domElement.textContent.split('');
       let span;


       for(let i = 0; i < splitDomElement.length; i++){
               span = document.createElement('span');
               span.innerHTML = splitDomElement[i];
       };

       console.log(span);
        
    }
}

#2

console.log(span); is outside the loop. Not sure what you are trying to do, and i had to guess creating an instance of a class so i guessed it looked something like this:

class LetterAnimations{
    constructor(domElement){

        let domEl = domElement;

        this.implementDomElement(domEl);

    }

    implementDomElement(domElement){


       let splitDomElement = domElement.textContent.split('');
       console.log(splitDomElement);
       let span;


       for(let i = 0; i < splitDomElement.length; i++){
               span = document.createElement('span');
               span.innerHTML = splitDomElement[i];
       };

       console.log(span);
        
    }
}
var newDiv = document.createElement("div"); 
var newContent = document.createTextNode("Hi there and greetings!"); 
newDiv.appendChild(newContent);  
let x = new LetterAnimations(newDiv);

for next time, please provide the code which replicates the problem please


#3

I am slightly confused, you create a new span element for each letter in domElement, this will create a lot of elements spans, is this what you want? I would declare span outside the loop. But this depends on your goal.

outside the loop you need to create one element, then within the loop use .appendChild() to append to the element created outside the loop, otherwise the data won’t persist (and only log last value)


#4

okay thank and sorry for my mistake.

Basically taking in the given domElement as an argument and then spliting the content inside the domElement and placing each char from the content back into the domeElement… so i can animate each char one by one.


#5

that is possible, but then outside the loop you need to create a container/parent element to which you can append each span child.


#6

Okay I changed it to this:

class LetterAnimations{
constructor(domElement){

    let domEl = domElement;

    this.implementDomElement(domEl);

}

implementDomElement(domElement){

    console.log(domElement);

   let splitDomElement = domElement.textContent.split('');
   let span,
       spans = [];


   for(let i = 0; i < splitDomElement.length; i++){
           span = document.createElement('span');
           span.innerHTML = splitDomElement[i];
           spans.push(span);
   };

    domElement.appendChild(spans);

}

}

But getting error on appendChild:
Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.


#7

why are we adding an array? We need a DOM element, functions like createElement can do that for us, then within the loop, append each span as a child (appendChlid) to the created element.


#8

Okay thanks. Works great now and there is less code too.

implementDomElement(domElement){

    console.log(domElement);

   let splitDomElement = domElement.textContent.split('');
   domElement.innerHTML = '';
   let span;


   for(let i = 0; i < splitDomElement.length; i++){
           span = document.createElement('span');
           span.innerHTML = splitDomElement[i];
           domElement.appendChild(span);
   };

}

#9

why would you use innerHTML when dealing with text only? Its an unnecessary security risk:

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Security_considerations

you are working with text only, use textContent

do you also understand why you went wrong with the loop?


#10

Okay will use that instead.

yes, its because the value was being replaced - had to right away append it into whichever div I desired to have it placed within.


#12

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.