First time messing with arrays. Trying to cycle through an image array, getting "Uncaught TypeError: Cannot set property 'src' of null" when clicking the next button. I thought it would be something simple like an id not matching up, but I can't spot any issues like that.
var target = document.getElementById('target');
var counter = 0;
var imageArray = [
"megatron.png",
"starscream.jpg",
"soundwave.jpg",
"shockwave.jpg",
"devastator.jpg",
"astrotrain.jpg",
"blitzwing.jpg",
"thrust.jpg",
"rumble.png",
"ravage.jpg",
"laserbeak.jpg",
"reflector.jpg"
];
function next() {
counter = counter + 1;
if (counter > imageArray.length -1) {
counter = 0;
}
target.src = imageArray[counter];
}
</!DOCTYPE html>
<html>
<head>
<title>Image Array</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./image-array.css">
<script src="image-array.js"></script>
</head>
<body>
<h1 class="center">Image Array</h1>
<div id="page" class="center">
<div id="socket" class="center">
<img src="megatron.png" id="target">
</div>
<div id="switchplate" class="center">
<button onclick="next()" id="next">Next</button>
</div>
</div>
</body>
</html>