Nodelist content

Question

I have a nodelist obtained with querySelectorAll and i'm using a forEach on this nodelist to obtain the values of each node's innerText then i truncate the innerText if there are more words then 20 and then i want to assign the new innerText back on the DOM on each element and i need some help on that

function truncate(el, wordCount) {  
  return el.split(" ").splice(0, wordCount).join(" ");
}

let test = document.querySelectorAll(".test p");

test.forEach(function (item) {
    item = item.innerText;
    var text = truncate(item, 20);
    return item.innerText = text;
  });

<div class="test">
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
</div>

Answer 1

1. What you need to use is slice rather than splice.
2. You are overriding the variable item which holds the DOM element (you're overriding it with its text content, a string), so at the end of forEach you're assigning the text back to a string and not to the DOM element. Either use a different variable name or don't use one at all as truncate can be called simply like truncate(item.innerText, 20).
3. The return statement in forEach is not needed.

Something like this:

function truncate(text, wordCount) {  
  return text.split(" ").slice(0, wordCount).join(" ");
}

let test = document.querySelectorAll(".test p");

test.forEach(function(item) {
  let text = truncate(item.innerText, 20);
  item.innerText = text;
});

/*

the forEach above can be shortened even more, like so:

test.forEach(item => item.innerText = truncate(item.innerText, 20));

*/

<div class="test">
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
</div>