JS function works in its own .html file but not when loaded into div

Question

I have a function that changes the src of an image depending on slider position. It works perfectly fine in it's own .html file, however when I save it and import it to a div in a different .html file, the some functionality begins to fail. The buttons to move the slider and the play/pause button works to change the image, however if you were to physically move the slider it no longer works to update the image. The console log is saying that my updateImage() function is not defined when it clearly is.

var imgElement = document.getElementById("image");
var sliderValue_store = sessionStorage.getItem("sliderValue");
console.log(sessionStorage.getItem("sliderValue"))
if (sliderValue_store == null) {
    imgElement.src = "#";
}
else {
// Update the img src using the slider value
imgElement.src = "#" + sliderValue_store + ".png";
}
// Retrieve the stored value when the page is loaded
window.addEventListener("load", function() {

  var storedValue = sessionStorage.getItem("sliderValue");
  if (storedValue) {
    rangeSlider.value = storedValue;
  }
});



           console.log(updateImage)
                  // Get the buttons and range slider elements
          var prevButton = document.getElementById('prev-button');
          var nextButton = document.getElementById('next-button');
          var rangeSlider = document.getElementById('range-slider');
            var step = rangeSlider.step;
          // Add event listeners to the buttons
          prevButton.addEventListener('click', function() {
              event.preventDefault();
            // Decrement the value of the range slider by the step value
            rangeSlider.value -= rangeSlider.step;
          updateImage(rangeSlider.value)
          sessionStorage.setItem("sliderValue", parseInt(rangeSlider.value)-parseInt(6));
          });
            
          nextButton.addEventListener('click', function() {
              event.preventDefault();
            // Increment the value of the range slider by the step value
            val = parseInt(rangeSlider.value);
            step = parseInt(rangeSlider.step);
            val += step;
            rangeSlider.value = val;
            updateImage(rangeSlider.value);
              sessionStorage.setItem("sliderValue", parseInt(rangeSlider.value)+parseInt(6));
          });
    
            document.addEventListener('keydown', function(e) {
          if (e.keyCode == 39) { //right
            rangeSlider.value = +rangeSlider.value + +rangeSlider.step;
            sessionStorage.setItem("sliderValue", parseInt(rangeSlider.value)-parseInt(0));
          } else if (e.keyCode == 37) { //left
            rangeSlider.value = +rangeSlider.value - +rangeSlider.step;
              sessionStorage.setItem("sliderValue", parseInt(rangeSlider.value)+parseInt(0));
          }
          updateImage(rangeSlider.value)
        })
        function updateImage(sliderValue) {
          console.log(sliderValue)
          document.getElementById("image").src =
            "#" +
            sliderValue + ".png";
          // Get the image and arrow button elements
          const image = document.querySelector('.image');
          const backwardArrow = document.querySelector('.backward-arrow');
          const forwardArrow = document.querySelector('.forward-arrow');
            
    // to update the slider value depending on what the session storage of the slider is            
// Update the value of the slider when it is changed
rangeSlider.addEventListener("change", function() {
  sessionStorage.setItem("sliderValue", this.value);
});   

console.log(sessionStorage.getItem("sliderValue"))



                    // Index of the current image in the images array
            let currentImageIndex = images.length;

            // Function to change the image to the previous image in the images array
            function showPreviousImage() {
                event.preventDefault();
              // Only show the previous image if the current image is not the first image
              if (currentImageIndex > 0) {
                currentImageIndex--;
                image.src = images[currentImageIndex];
              }
            }

            // Function to change the image to the next image in the images array
            function showNextImage() {
                event.preventDefault();
              // Only show the next image if the current image is not the last image
              if (currentImageIndex < images.length - 1) {
                currentImageIndex++;
                image.src = images[currentImageIndex];
              }
            }

            // Add click event listeners to the arrow buttons to show the previous/next image when clicked
            backwardArrow.addEventListener('click', showPreviousImage);
            forwardArrow.addEventListener('click', showNextImage);
        }

        <input type="range" min="0" max="384" value="0" step="6"  oninput="updateImage(this.value)" id="range-slider" class="slider"/>
        <div>
    <button id="prev-button" class="prev"></button>
    <button class="play-pause-button">Play</button>
<button id="next-button" class="next"></button>
            </div>
</div>
        <div>
<img id="image" src="#" width="840" height="660" alt="image1" class="image">

</div>

Here is the js code I use to import the .html file that both the html and js were stored in.

const body = document.querySelector('.body_test')
fetch('body_test.html')
.then(res=>res.text())
.then(data=>{
    body.innerHTML=data
    const parser = new DOMParser()
    const doc = parser.parseFromString(data, 'text/html')
    eval(doc.querySelector('script').textContent)
})

Here is how I import the first html file into this one.

    <html lang="en">
    <script src="gifshot/dist/gifshot.js"></script>
<script src="FileSaver.js/dist/FileSaver.js"></script>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/57b929fbcb.js" crossorigin="anonymous"> 
   </script>
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
</head>
<body>
    <div class="body_test">
    </div>
    <script src="test_script.js"></script>
</body>
</html>