0

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>
V1xIII
  • 109
  • 3
  • 12

2 Answers2

3

Here is the working sample of your code.Please check

var counter = 0;

var imageArray = [
 "https://doodles.google.ca/d4g/images/splashes/featured.png", "https://vignette.wikia.nocookie.net/logopedia/images/a/aa/Google_Assistant.png/revision/latest?cb=20170815132456",
 "http://st1.bgr.in/wp-content/uploads/2017/07/google-search.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="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLxmBuSqBLEVe6FZkt8CK7GxewFiDHOihhgod4ncC8H0hPVV6w" style="width:100px;height:100px;" id="target" >
 </div>
 <div id="switchplate" class="center">
   <button onclick="next()" id="next">Next</button>
 </div>
</div>


</body>
</html>
Sandeep P Pillai
  • 735
  • 4
  • 22
  • Why does this work without "var target = document.getElementById('target');" ? And why does it fix it? – V1xIII Nov 16 '17 at 04:44
2

The issue is because of the loading of <script src="image-array.js"></script> is in the head tag.

When the above script is loaded it will run through this statement

var target = document.getElementById('target');

At that time the DOM is not ready and there is no element with id target

So it is throwing the error.

Remove the script tag and add it before closing body tag

<body>
  // rest of the DOM
<script src="image-array.js"></script>
</body>
brk
  • 43,022
  • 4
  • 37
  • 61
  • Wow, looks like I have some reading to do! I assumed that having the script tag in the head would always be the way to go. – V1xIII Nov 16 '17 at 04:37