Set attributes for multiple elements with javascript

Question

So I have table:


    
       
         item
         amount
         total

And with javascript I want to take values from thead tr th and set them to tbody tr td as attributes. I tried this:

let title = [];
  document.querySelectorAll('.checkout-title').forEach(el => {
      title.push(el.innerHTML);
  });

  document.querySelectorAll('.checkout-info').forEach((el, index) => {
      el.setAttribute('data-title', title[index]);
   });

Bus as it is now I only manage to assign values to first tbody tr td child and second left with undefined it looks like this:

How I should fix this undefined assignation?

user_6099327 · Answer

The issue with the code is, there are only three nodes with querySelector document.querySelectorAll('.checkout-title') and six nodes with querySelector document.querySelectorAll('.checkout-info'). That's why there is value for first 3 nodes and undefined for last three nodes.

You have to access nodes from title array with title[index % header.length] so that it will loop through the title twice and assign the attribute correctly

let title = [];
const header = document.querySelectorAll('.checkout-title');
header.forEach(el => {
  title.push(el.innerHTML);
});

const nodes = document.querySelectorAll('.checkout-info');
nodes.forEach((el, index) => {
  el.setAttribute('data-title', title[index % header.length]);
});


  
    
      item
      amount
      total

Set attributes for multiple elements with javascript

1 Answers