Image-slider. Why if I make a variable common, it stops working? And how to use addEventListener() instead of onclick()?

Question

I make an image-slider. It's about a button function.
https://code.sololearn.com/W3E9tYgH1Q1D/#html

1) Why when I change variable's place, it stops working?

var images = ["images/1.jpg", "images/2.jpg", "images/3.jpg"];
var i = 0;
var myImg = document.getElementById("curImg"); // If I put it here it does not work
function goNext() {
i++;
if (i >= images.length){i=0}
myImg.src = images[i];
}
...

Why does it happen?

2) How to use addEventListener() instead of onclick()?

Answer 1

https://code.sololearn.com/WdBfoR07k9eR/