ボタンを押したら右の画像に行くという処理をしたいです

（<）ボタンを押したら左の画像に（>）ボタンを押したら右の画像に飛べるようにしたいです

エラーが出てしまって息詰まってます

発生している問題・エラーメッセージ

main.js:13 Uncaught ReferenceError: button is not defined
    at main.js:13

該当のソースコード

HTML
1<html lang="ja">
2  <head>
3    <meta charset="utf-8">
4    <title>カルーセルスライダー</title>
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
7    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script src="js/jquery-3.6.0.min.js"></script>
11    <script src="js/main.js"></script>
12  </head>
13  <body>
14    <div class="content">
15       <button id="leftbotan" type="button" name="button"><</button>
16      <div class="">
17        <img id="mainvisual" src="images/mainvisual1.jpg" alt="">
18      </div>
19       <button id="rightbotan" type="button" name="button">></button>
20    </div>
21  </body>
22  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
23</html>
24
25ーーーーーーーーーーーーーーーcssーーーーーーーーーーーーーーー
26
27@charset "UTF-8";
28html {
29  font-size: 100%;
30}
31img {
32  max-width: 100%;
33}
34li {
35  list-style: none;
36}
37a {
38  text-decoration: none;
39  color:#333;
40}
41button {
42  margin: 0 5px;
43  font-weight: bold;
44}
45.content {
46  padding-top: 60px;
47  width: 100%;
48  display: flex;
49  align-items: center;
50}
51#mainvisual {
52  width: 100%;
53  max-width: 994px;
54  padding: 0 15px;
55}
56
57ーーーーーーーーーーーーーーーーjsーーーーーーーーーーーーーーーー
58'use strict';
59
60const images=['images/mainvisual1.jpg','images/mainvisual2.jpg','images/mainvisual3.jpg','images/mainvisual4.jpg','images/mainvisual5.jpg','images/mainvisual6.jpg','images/mainvisual7.jpg'];
61let current=0;
62
63function changeImage(num) {
64  if(current+num>=0 && current+num<images.length){
65    current+=num;
66    document.getElementById('mainvisual').src=images[current]
67  }
68};
69
70button.onload=function(){
71  document.getElementById('leftbotan').onclick =function() {
72    changeImage(-1);
73  };
74  document.getElementById('rightbotan').onclick =function() {
75    changeImage(1);
76  };
77}
78
79
80