Cannot read property 'addEventListenerr' of null at HTMLDocument.と表示される

前提・実現したいこと

スライドショーを実装したい。
JavaScriptを使ってスライドを作っています、
JSを実装中に以下のエラーメッセージが発生しました。

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

HTML
省略

<link rel="stylesheet" href="css/style.css">
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

ーーーSCSSーーー

{
box-sizing: border-box;
&::before, &::after {
box-sizing: border-box;
}

}
$arrow: #3c376f;
$bg: #fef8f9;

.container {
max-width: 800px;
margin: 0 auto;
padding: 50px;
}

button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 20px 5px;
color: $arrow;
font-size: 2rem;
}

button span {
position: relative;
display: inline-block;
transform: translateX(0);
transition: transform 0.3s ease;
}

.previous:hover span {
transform: translateX(-10px) scale(1.2);
}

.next:hover span {
transform: translateX(10px) scale(1.2);
}

.slider-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}

.slider-nav li {
display: flex;
flex: 2;
text-align: center;
}

img.active {
max-width: 100%;
display: none;
box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
}
.active1 {
max-width: 100%;
display: none;
box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
}

img.active {
display: block;
animation: fadeImg 0.8s;
}

.slider-nav .arrow {
flex: 0 0 15%;
}

.slider-nav a {
flex-basis: 100%;
display: flex;
align-items: center;
}

.slider-nav span {
display: block;
width: 100%;
}

@keyframes fadeImg {
from {
opacity: 0;
}

to {
opacity: 1;
}
}
}

ーーーJSーーーー
const items = document.querySelectorAll('img');
const itemCount = items.length;
const nextItem = document.querySelector('.next');
const previousItem = document.querySelector('.previous');
let count = 0;

function showNextItem() {
items[count].classList.remove('active');

if(count < itemCount - 1) {
count++;
} else {
count = 0;
}

items[count].classList.add('active');
console.log(count);
}

function showPreviousItem() {
items[count].classList.remove('active');

if(count > 0) {
count--;
} else {
count = itemCount - 1;
}

items[count].classList.add('active');
console.log(count);
}

function keyPress(e) {
e = e || window.event;

if (e.keyCode == '37') {
showPreviousItem();
} else if (e.keyCode == '39') {
showNextItem();
}
}

document.addEventListener("DOMContentLoaded",function(){
document.getElementById('slider').addEventListenerr('click', showNextItem)
previousItem.addEventListener('click', showPreviousItem);
document.addEventListener('keydown', keyPress);
});

エラー
JavaScript
Cannot read property 'addEventListenerr' of null
    at HTMLDocument.

該当のソースコード

JS
1const items = document.querySelectorAll('img');
2const itemCount = items.length;
3const nextItem = document.querySelector('.next');
4const previousItem = document.querySelector('.previous');
5let count = 0;
6
7function showNextItem() {
8  items[count].classList.remove('active');
9
10  if(count < itemCount - 1) {
11    count++;
12  } else {
13    count = 0;
14  }
15
16  items[count].classList.add('active');
17  console.log(count);
18}
19
20function showPreviousItem() {
21  items[count].classList.remove('active');
22
23  if(count > 0) {
24    count--;
25  } else {
26    count = itemCount - 1;
27  }
28
29  items[count].classList.add('active');
30  console.log(count);
31}
32
33function keyPress(e) {
34  e = e || window.event;
35  
36  if (e.keyCode == '37') {
37    showPreviousItem();
38  } else if (e.keyCode == '39') {
39    showNextItem();
40  }
41}
42
43document.addEventListener("DOMContentLoaded",function(){
44document.getElementById('slider').addEventListenerr('click', showNextItem)
45previousItem.addEventListener('click', showPreviousItem);
46document.addEventListener('keydown', keyPress);
47});