How can I output an array in sequence to various div's?-CodePudding

I have tried many methods, the latest gives no output. Here are my codes. At other attempts, I got the array to display but not as wanted. Examples of how it's to display are these(I capitalized the strings which are from the array):

NOTE, each is a separate div which has been looped to give them similar attributes like class, The array output with the strings is added as the text content of each of the divs

My best output

The FIRST SECOND THIRD question

Expected Output

The FIRST question

The SECOND question

The THIRD question

const myArr = ['first', 'second', 'third'];
for (let o = 0; o < myArr.length; o  ) {
  console.log(`The ${myArr[o]} question`)

  const divOne = document.querySelectorAll('.eachSection-class div:nth-of-type(1)');
  for (j = 0; j < divOne.length; j  ) {
    divOne[j].classList.add('divOne-class');
    divOne[j].textContent = `The ${myArr[o]} question`;
  }
  console.log(divOne);
}

<body>
  <main>
    <section>
      <div></div>
      <div></div>
    </section>
    <section>
      <div></div>
      <div></div>
    </section>
    <section>
      <div></div>
      <div></div>
    </section>
  </main>

CodePudding user response：

First of all, your selector has no matches. I suppose you forgot to give the section elements their class attributes.

The main issue with your code is that for each element of the array (outer loop), you iterate all div elements you want to use. That means you are setting the text of these div elements all to the same text, and then repeat this job for the next array element.

Instead, you should just have one loop, and use the index for both the array element and the div.

NB: o is an unusual name for a loop variable, so I renamed it.

const myArr = ['first', 'second', 'third'];
const divOne = document.querySelectorAll('.eachSection-class div:nth-of-type(1)');
for (let i = 0; i < myArr.length; i  ){
    divOne[i].classList.add('divOne-class');
    divOne[i].textContent = `The ${myArr[i]} question`;
}

<main>
    <section >
        <div></div>
        <div></div>
    </section>
    <section >
        <div></div>
        <div></div>
    </section>
    <section >
        <div></div>
        <div></div>
    </section>
</main>

CodePudding user response：

I am not totally sure what you want the code to do, but this will likely give you enough to do what you want

const main = document.querySelector('main'); 
main.classList.add('main-class');
const sections = document.querySelectorAll('main section');
sections.forEach(section => section.classList.add('eachSection-class'));

const myArr = ['first', 'second', 'third'];
myArr.forEach((val,i) => {
  const content = `The ${val} question`;
  console.log(content)
  const firstDiv = sections[i].querySelector('div'); // assuming as many sections as array length
  firstDiv.classList.add('divOne-class');
  firstDiv.textContent = content;
})

.divOne-class { border: 1px solid red; }

<body>
  <main>
    <section>
      <div></div>
      <div>First section, second div</div>
    </section>
    <section>
      <div></div>
      <div>Second section, second div</div>
    </section>
    <section>
      <div></div>
      <div>Third section, second div</div>
    </section>
  </main>