Need help! Please tell me why my js isn't showing up

Hello. First time here and not sure I know I’m doing this wrong but I’ve been stuck on this simple project. It was working but I gave it to someone else to help me fix something and when I got it back it was broken. I’m fairly sure that it is obvious and I’m missing it but its been so long now that I just want it fixed and to know what I missed and how I can test for this in the future.

html is:

This is a story

The winning Mega Millions numbers will be:

  <div class="secondline">
    <div class="mainNumber">
      <label>Main Numbers: </label>
    </div>
    <div class="bonusNumber">
      <label>Bonus Number: </label>
    </div>
  </div>

  <div class="thirdline">
    <div class="buttonDiv">
      <input
        class="button"
        type="button"
        value="Click her to pick your numbers"
        onclick="picknumbers()"
      />
    </div>
  </div>
</div>
<script src="./bs1.js"></script>

js is:
function picknumbers(){

var num1 = 0;
for (var i = 0; i < 6; i++){
    var num1 = (Math.random()*70)+1;
num1 = parseInt(num1);
}

var num2 = 0;
for (var i = 0; i < 6; i++){
    var num2 = (Math.random()*70)+1;
num2 = parseInt(num2);
}

var num3 = 0;
for (var i = 0; i < 6; i++){
    var num3 = (Math.random()*70)+1;
num3 = parseInt(num3);
}

var num4 = 0;
for (var i = 0; i < 6; i++){
    var num4 = (Math.random()*70)+1;
num4 = parseInt(num4);
}

var num5 = 0;
for (var i = 0; i < 6; i++){
    var num5 = (Math.random()*70)+1;
num5 = parseInt(num5);
}

var mainNumbersArray = [num1, num2, num3, num4, num5];
mainNumbersArray.sort(function(a, b){return a-b});

var bonusNum = (Math.random()*25)+1;
bonusNum = parseInt(bonusNum);

var mainNumber = document.getElementByClassName('mainNumber');
var bonusNumber = document.getElementByClassName('bonusNumber');

mainNumber.innerHTML = mainNumbersArray;
bonusNumber.innerHTML = bonusNum;

}

and if interested this is the css:
.container {
display: flex;
flex-wrap: wrap;
width: 600px;
height: 500px;
background-color: mediumspringgreen;
border-radius: 25px;
font-family: “Roboto”, sans-serif;
box-shadow: 6px 7px 15px 3px;
}

.maneki-neko {
width: 27%;
margin-top: 10px;
}

.luckcat {
width: 100px;
height: 100px;
padding-left: 5px;
padding-top: 5px;
float: left;
}

.headline {
width: 71%;
margin-top: 10px;
}

.firstline {
width: 100%;
display: flex;
justify-content: space-between;
}

.mainNumber {
width: 45%;
height: 50px;
margin-left: 15px;
}

.bonusNumber {
width: 45%;
height: 50px;
margin-left: 15px;
}

.secondline {
margin-top: 60px;
width: 100%;
display: flex;
justify-content: space-between;
}

.thirdline {
display: flex;
justify-content: center;
margin-top: 50px;
}

It’s not .getElementByClassName, it’s .getElementsByClassName, just in case: it returns collection of elements.
You could use .querySelector() too