JavaScript last element of HTML collection not defined

I am trying to create a bookable product, where upon selected (= selectbox) a room type, the picture changes to that specific room with good old javascript.

the interesting part is that it works for the first element of the HTML collection, but the last element is giving an undefined and makes it impossible to override. I am not getting why that is. I tried via the console log to view what I am missing, but I see nothing problematic.

HTML collection:

0: <a href="https://staging.deloftli…09/Steck-coachruimte.jpg" hidefocus="true" style="outline: currentcolor none medium;">​
1: <img class="zoomImg" role="presentation" alt="" src="https://staging.deloftli…09/Steck-coachruimte.jpg" style="position: absolute; top:…none; max-height: none;">

I have the following script:

<script id="bookingschanges">
      var activities = document.getElementById("wc_bookings_field_resource");
      var image = document.getElementsByClassName("woocommerce-product-gallery__image")[0].children[0].firstChild;
      var zoompic = document.getElementsByClassName("woocommerce-product-gallery__image")[0].children[1];

activities.addEventListener("click", function() {
    var options = activities.querySelectorAll("option");
});

activities.addEventListener("change", function() {
    if(activities.value == "1949")
    {
        image.src = "https://staging.deloftlisse.nl/wp-content/uploads/2021/09/Podkas.jpeg";
        image.srcset = ""
        zoompic.scr = "https://staging.deloftlisse.nl/wp-content/uploads/2021/09/Podkas.jpeg";
    }
console.log(image);     
console.log(zoompic);
});</script>

The first element (image) is correct, the second element (zoompic) gives undefined.

To see it live, go to https://staging.deloftlisse.nl/product/vergaderruimte-huren/ and check the console log. What am I missing here?

Answer

Variable zoompic is not defined at the time the variable is declared (its called before the element is created on loading, debug the page and refresh it to see) you will need to use an onload event listener.

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

As someone else has suggested it would be better to call the image change function in the original javascript to change the image that is selected and you will avoid any issues. This might not be easy though if it is an external library.

EDIT: Added an example of onLoad

window.addEventListener('load', (event) => {
  var activities = document.getElementById("wc_bookings_field_resource");
  var image = document.getElementsByClassName("woocommerce-product-gallery__image")[0].children[0].firstChild;
  var zoompic = document.getElementsByClassName("woocommerce-product-gallery__image")[0].children[1];

  activities.addEventListener("click", function() {
    var options = activities.querySelectorAll("option");
  });

  activities.addEventListener("change", function() {
    if (activities.value == "1949") {
      image.src = "https://staging.deloftlisse.nl/wp-content/uploads/2021/09/Podkas.jpeg";

      image.srcset = "https://staging.deloftlisse.nl/wp-content/uploads/2021/09/Podkas.jpeg 768w";

      zoompic.src = "https://staging.deloftlisse.nl/wp-content/uploads/2021/09/Podkas.jpeg";
    }
    console.log(image);
    console.log(zoompic);
  })
});