How can I call a function with a parameter inside fetch method?

I am working on a function with one parameter, and it should be called with an argument in an Html file, my problem is that this function should loop through fetched data from a local JSON File, the parameter takes a part in the code inside the fetch method, so I cant call the main function, any solutions?!! hope my code shows it clearly

HTML code:

 <div class="on-off-btns">
              <span onclick="showSlide(counter=1)">moon</span>
              <span onclick="showSlide(counter=2)">mars</span>
              <span onclick="showSlide(counter=3)">europa</span>
              <span onclick="showSlide(counter=4)">titan</span>
            </div>

javascript code:

let links = document.querySelectorAll(".on-off-btns span");
let counter = 1;

let myFile = "./data.json";
const showSlide = (s) => {
  fetch(myFile)
    .then((res) => res.json())
    .then((data) => {
      for (let i = 0; i < data.destinations.length; i++) {
        for (let j = 0; j < links.length; j++) {
          if (s > data.destinations.length) {
            counter = 1;
          } else if (s < 1) {
            counter = data.destinations.length;
          }
        }
        images.src = data.destinations[counter - 1].images["png"];
        titles.textContent = data.destinations[counter - 1].name;
        descriptions.textContent = data.destinations[counter - 1].description;
      }
    });
};