I've search the forum for why my img is null when getElementById is called, and I've moved the script below the img, but I am still getting the error that the image is null.
Here is my code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="irimg" src="ir.bmp" alt="Video Stream" style="width:640px;height:480px;">
<script type="text/javascript">
function loadNextImage() {
// An image element for loading our next image
var ourImage = new Image();
// Setup the event handlers before setting the source
ourImage.onload = function() {
// Request the next frame
requestAnimationFrame(loadNextImage);
// Swap out the image element on the page with the new one
var oldImage = document.getElementById('irimg');
oldImage.parentElement.insertBefore(ourImage, oldImage);
oldImage.parentElement.removeChild(oldImage);
};
ourImage.onerror = function(){
// Something went wrong with this frame. Skip it and move on.
requestAnimationFrame(loadNextImage);
}
// Finally load the image
ourImage.src = "ir.bmp?" + new Date().getTime();
};
requestAnimationFrame(loadNextImage);
</script>
</body>
</html>
The error is occurs here:
var oldImage = document.getElementById('irimg');
oldImage.parentElement.insertBefore(ourImage, oldImage);
The error given by Chrome is Uncaught TypeError: Cannot read Property 'parentElement' of null.
I'd appreciate help in understanding why it is null. Thanks.
I've search the forum for why my img is null when getElementById is called, and I've moved the script below the img, but I am still getting the error that the image is null.
Here is my code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="irimg" src="ir.bmp" alt="Video Stream" style="width:640px;height:480px;">
<script type="text/javascript">
function loadNextImage() {
// An image element for loading our next image
var ourImage = new Image();
// Setup the event handlers before setting the source
ourImage.onload = function() {
// Request the next frame
requestAnimationFrame(loadNextImage);
// Swap out the image element on the page with the new one
var oldImage = document.getElementById('irimg');
oldImage.parentElement.insertBefore(ourImage, oldImage);
oldImage.parentElement.removeChild(oldImage);
};
ourImage.onerror = function(){
// Something went wrong with this frame. Skip it and move on.
requestAnimationFrame(loadNextImage);
}
// Finally load the image
ourImage.src = "ir.bmp?" + new Date().getTime();
};
requestAnimationFrame(loadNextImage);
</script>
</body>
</html>
The error is occurs here:
var oldImage = document.getElementById('irimg');
oldImage.parentElement.insertBefore(ourImage, oldImage);
The error given by Chrome is Uncaught TypeError: Cannot read Property 'parentElement' of null.
I'd appreciate help in understanding why it is null. Thanks.
Share Improve this question edited Nov 2, 2016 at 12:45 dashdashzako 1,34615 silver badges24 bronze badges asked Nov 2, 2016 at 11:46 PhilBotPhilBot 6020 gold badges91 silver badges190 bronze badges 3-
1
Using Chome's debug mode (F12), set a breakpoint on the line
oldImage.parentElement.insertBefore(ourImage, oldImage);, move the cursor on top ofoldImageand see what is shown (tooltip-style pop). – FDavidov Commented Nov 2, 2016 at 11:50 - 1 It could be that the script is running before the page is fully loaded, meaning the iamge hasn't rendered yet. Normally if you have a script that accesses DOM elements you want to make sure that they have been loaded into the DOM first before you try accessing them. Make your script run once the page has loaded, rather than immediately – Jayce444 Commented Nov 2, 2016 at 11:50
- 1 Agree with @Jayce444 as a possible source. Exercising what I suggested may give you some hints. – FDavidov Commented Nov 2, 2016 at 11:52
1 Answer
Reset to default 3You're removing the image with that ID, and then next time your code es through it can't find any image with that ID.
You need to set that ID on your new image that you're replacing the old one with.
like so
// An image element for loading our next image
var ourImage = new Image();
ourImage.id='irimg';
see: https://jsfiddle/9Lp1724v/