1

I have trouble understanding the problem that's preventing me from run some JavaScript code. On clicking the button it should change the image, which is saved in an array. The images are in the same folder as the html document, so there is no error in the path.

While it works on Firefox, it doesn't work on Chrome and Edge.

My Chrome console says Can not set property of 'src' of null.

My Edge console says Unable to set property 'src' of undefined or null reference.

This is the line that is causing the problem:

imgElem.src = imgArr[a];

This is the whole code:

"use strict"
var a = 0;
var imgArr = ["sl0.jpg", "sl1.jpg", "sl2.jpg"];
var imgElem = document.getElementById("img");

function changeImg() {
  imgElem.src = imgArr[a];

  if (a < imgArr.length - 1) {
    a++;
  } else {
    a = 0;
  }
}
<img id="img" src="sl0.jpg" width="200px" />
<br /><button type="button" onclick="changeImg()">Click me</button>

I would appreciate it if you could explain the problem. The source obviously isn't null, since it's referencing an "object" in the array.

Edit: As suggested by AlbertoSingaglia, I tried to find the imgElem in console. It found it in Firefox, while it didn't find it in Chrome.

9
  • 1
    Be sure to wrap the code in a document .ready() event
    – Dev Man
    Nov 19, 2019 at 19:36
  • 2
    I pasted your code in a snippet and it works for me in Chrome
    – j08691
    Nov 19, 2019 at 19:36
  • 2
    @ImmortalDude that shouldn't be necessary because of where the <script> appears in the markup.
    – Pointy
    Nov 19, 2019 at 19:36
  • What if you print imgElem in console?
    – Alberto
    Nov 19, 2019 at 19:37
  • 3
    @bowl_of_rice A cors error would not cause a property access error, nor would one occur here as there is no ajax request. Resource requests (eg like image src="") aren't affected by cors Nov 19, 2019 at 19:38

1 Answer 1

3

Where does your script resides in the html markup? is it in the head?

That might be the problem because in that case it will run before the html has rendered.

Try one of these things:
1) move script tag to just before the body ends.

<body>
    <!-- markup -->
    <script></script>
</body>

or

2) move line var imgElem = document.getElementById("img"); inside the function changeImg()

like:

"use strict"
var a = 0;
var imgArr = ["sl0.jpg", "sl1.jpg", "sl2.jpg"];


function changeImg() {
  var imgElem = document.getElementById("img");
  imgElem.src = imgArr[a];

  if (a < imgArr.length - 1) {
    a++;
  } else {
    a = 0;
  }
}
3
  • Followed the 2cnd suggestion and it worked. Thank you for the help =)
    – DrDoom
    Nov 19, 2019 at 20:02
  • 1
    In code you provided, javascript will run on load and store imgElem to use for later when the function is called. After modifications according to second suggestion, it will get element from document every time changeImg() is called.
    – rupindr
    Nov 19, 2019 at 20:06
  • Thanks. I assume it would be a "good practice" to keep all the variables that are referenced or changed inside the function?
    – DrDoom
    Nov 19, 2019 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.