I have 2 external JavaScript files which both call functions via **window.onload**. The files conflict, so only the second js file is working. 

How would I fix the **window.onload** so both functions work? Should I do this in the HTML file or can I fix it in one of the js files?

The HTML header is:

```
<link type="text/css" rel="stylesheet" href="house.css" />
<style type="text/css"></style>
<script type="text/javascript" src="slideshow_library.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript" src="house.js"></script>

```

house.js:

```
    var $ = function(id){
    return document.getElementById(id);
}

var calculateClick = function() {
    console.log("click, calculate click is running");
    //blahblahblah, lots of code
}

window.onload = function(rental){
    console.log("onload, javascript is running");
    console.log(rental);

    $("calculate").onclick = calculateClick;
}

```

Second window.onload is in 2 js files:

slideshow.js:

```
var slideShow;

window.onload = function (slideShow) {
    var params = {
        //blahblahblah lots of code
    }
}

```

slideshow\_library.js:

```
var $ = function(id) { 
    return document.getElementById(id); 
}

var SlideShow = function( params ){
    //blahblah blah even more code
} 
SlideShow.prototype.displayImage = function(){
    //blahblah blah even more code
}
SlideShow.prototype.displayNextImage = function(){
    //blahblah blah even more code
}
SlideShow.prototype.displayPreviousImage = function(){
    //blahblah blah even more code
}
SlideShow.prototype.togglePlay = function(){
    //blahblah blah even more code 
}

```