How to run these 2 javascripts at the same time in html

Question

Here is the first bit:

<script type='text/javascript'>
        window.onload=function(){
        var strLinks = '';

        for (var i = 1; i <= 23; i++) {
        strLinks += '<li><a><img src="chapter_1/'+ i +'.jpg" alt="" /></a></li>';
    }   

        document.getElementById("pages").innerHTML = strLinks;
    }
    </script>

And the second bit:

<script type='text/javascript'>
    window.onload=function(){
    var strLinks = '';

    for (var i = 1; i <= 5; i++) {
    strLinks += '<option value="http://google.com">link '+ i +'</option>';
}   

    document.getElementById("chapter").innerHTML = strLinks;
}
</script>

The first one would basically add images automatically and the second one would add links automatically as well until the loop ends. However when I try to put these two together, the first one won't run at all. How do I get both of these to run?

in first you define `window.onload = ....` and in second you **re**define `window.onload=...` — Anonymous0day, Oct 09 '15 at 14:22

score 7 · Accepted Answer · answered Oct 09 '15 at 14:22

Use addEventListener instead of assigning (and overwriting) the property directly.

addEventListener('load', myFunction);
addEventListener('load', myOtherFunction);

function myFunction(event) {
  document.body.appendChild(
    document.createTextNode("some text")
  );
}

function myOtherFunction(event) {
  document.body.appendChild(
    document.createTextNode("some other text")
  );
}

score -2 · Answer 2 · edited Oct 09 '15 at 14:29

You can only have one onload function. Therefore, do the following:

<script type='text/javascript'>
window.onload=function(){
    var strLinks = '';

    for (var i = 1; i <= 23; i++) {
        strLinks += '<li><a><img src="chapter_1/'+ i +'.jpg" alt="" /></a></li>';
    }   

    document.getElementById("pages").innerHTML = strLinks;

    strLinks = '';

    for (var i = 1; i <= 5; i++) {
        strLinks += '<option value="http://google.com">link '+ i +'</option>';
    }   

    document.getElementById("chapter").innerHTML = strLinks;
}
</script>

Also, please remove magic numbers like '23' and '5'. User variables to define these values.

Thank you! I'm fairly new to this so I don't completely understand yet the lingo used in the other answers. — Nari, Oct 09 '15 at 14:32

How to run these 2 javascripts at the same time in html

2 Answers2