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

Joined
Sep 12, 2022
Messages
39
Reaction score
0
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
The FIRST SECOND THIRD question
The FIRST SECOND THIRD question

Expected Output
The FIRST question
The SECOND question
The THIRD question
HTML:
<body>
        <main>
            <section>
                <div>
                    
                </div>
                <div>

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

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

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

JavaScript:
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);
}
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    
    </style>
  
  </head>
  <body>   
      <main>
            <section>
                <div>
                    
                </div>
                <div>

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

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

                </div>
            </section>
        </main>
        <script>
        /*
Expected Output
The FIRST question
The SECOND question
The THIRD question
        */
        const divs = [...document.querySelectorAll('section div:nth-child(1)')];
        ['first', 'second', 'third'].forEach( (item, index) => divs[index].textContent = `The ${item.toUpperCase()} chapter` );
        </script>
  </body>
</html>
 
Joined
Sep 12, 2022
Messages
39
Reaction score
0
I did it with this, the HTML remains the same:
JavaScript:
const sections = document.querySelectorAll('main section');
  for (let i = 0; i < sections.length; i++) {
    sections[i].classList.add('section-class');
  }

const divOne = document.querySelectorAll('.section-class div:nth-of-type(1)');
  for (let i = 0; i < divOne.length; i++) {
    divOne[i].classList.add('divOne-class');
  }

const myArr = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh'];
for (let i = 0; i < myArr.length; i++){
  divOne[i].textContent = `The ${myArr[i]} question`;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top