How do I load all options in a filtered list on page load? Right now, I have to click "show all" to make that happen

I'm working on displaying a list of books, and I have it set up so you can filter by category. That part of my JavaScript works, but I need to make one tweak. Right now, on page load nothing shows up until you click "show all." What do I need to change in my code so everything loads when the page loads? (Hope that makes sense)

My HTML:

<div id="myBtnContainer">
<button class="bookbtn active" onclick="filterSelection('all')">Show all</button>
<button class="bookbtn" onclick="filterSelection('autobiography')">Autobiography</button>
<button class="bookbtn" onclick="filterSelection('poetry')">Poetry</button>
<button class="bookbtn" onclick="filterSelection('fiction')">Fiction</button>
<button class="bookbtn" onclick="filterSelection('children')">Children</button></div>

<!-- Begin the listing of ALL THE BOOKS! -->
<div class="bookcontainer">
<ul class="booklist">
<div class="filterDiv autobiography">
<li>
<a href="books/singlebook.html">
<img src="images/books/hardy_silence.png" alt="" class="img-book" />
<div class="book-title">Book Title<br></div>
<div class="book-author">by Author</div>
</a>
</li>
</div>

CSS:

.bookcontainer {
    overflow: hidden;
}

#myBtnContainer {
    z-index: 125;
    margin-bottom: 1.5rem;
    align-self: left;
    align-items: left;
    text-align: left;
}

.filterDiv {
    float: left;
    text-align: center;
    display: none;
    /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

/* Style the buttons */
.bookbtn {
    border: none;
    outline: none;
    padding: 12px 16px;
    margin-right: 10px;
    background-color: #f1f1f1;
    cursor: pointer;
}

/* Add a light grey background on mouse-over */
.bookbtn:hover {
    background-color: #ddd;
}

/* Add a dark background to the active button */
.bookbtn.active {
    background-color: #666;
    color: white;
}

and my JavaScript (copied from w3 if I'm being completely honest):

filterSelection("all")
function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("filterDiv");
    if (c == "all") c = "";
    // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
    for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
    }
}

// Show filtered elements
function w3AddClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        if (arr1.indexOf(arr2[i]) == -1) {
            element.className += " " + arr2[i];
        }
    }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
    var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
            arr1.splice(arr1.indexOf(arr2[i]), 1);
        }
    }
    element.className = arr1.join(" ");
}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("bookbtn");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
    });
}

Just simply add:

window.onload = () => {
  filterSelection('all')
};

So it will trigger it when page loads.