I have spend many hours trying to debug this error
this is the code:
an array with objects
var reviews = [
{
id:1,
name:"Sarah Doe",
img:
"https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
},
{
id:2,
name:"Clara Doe",
img:
"https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg",
}
]
var img1 = document.getElementById("img");
var nextBtn = document.querySelector(".nextbtn");
var currentItem = 0;
window.addEventListener('DOMContentLoaded',function(){
var item = reviews[currentItem];
img.src = item.img;
})
function ShowImage(){
var item1 = reviews[currentItem];
img.src = item1.img;
}
nextBtn.addEventListener('click',function(){
showImage(currentItem);
currentItem++;
});
and this is the Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="app.js"></script>
</head>
<body>
<img id="img" src="" alt="">
<button class="nextbtn">Next</button>
</body>
</html>
the error shows up here:
nextBtn.addEventListener('click',function(){
showImage(currentItem);
currentItem++;
});
i've got this error in the console