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

Atman Atos · Dec 29, 2022

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);
}

Padonak · Dec 29, 2022

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>

Atman Atos · Dec 29, 2022

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`;
}

How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
How can I add arrows to my FAQ	0	Aug 9, 2023
How to add a className to an object in array in js?	1	Dec 7, 2021
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Get await function in loop to finish before script ends	0	Oct 14, 2021
Help in hangman game	1	Jul 24, 2023
How can I count number of elements in an HTML page	7	Oct 5, 2010

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

Atman Atos

Padonak

Atman Atos

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads