js for loop innerHTML function does not work on load on same id

Question

for loop innerHTML += does not work when function is called on addeventlistener load

<main id='outSecs'>
    foobar
</main>

<script>
    document.getElementById('outSecs').addEventListener('load', myFn);

    function myFn() {
        for (var q = 1; q <= 9; q++) {
            document.getElementById('outSecs').innerHTML += "<section><p class='myOutput'></p></section>";
        }
    }

how do i insert looped code with innerHTML on load?

Answer 1

I suggest you use window's DOMContentLoaded event.

Also No need to keep getting the main container every time. Just get it once and fill it.

Here is an updated version using ES6 and template literals

const myFn = () => {
  const mainContainer = document.getElementById('outSecs');
  mainContainer.innerHTML = Array.from({ length: 9 })
  .map((_, i) => `<section id="s${i}"><p class="myOutput">${i+1}</p></section>`)
  .join('')
};

window.addEventListener('DOMContentLoaded', myFn);

<main id='outSecs'>
  foobar
</main>