For a modelviewer of a AR, I would like to change 2 sources with Javascript in one single click. The AR objects uses for Android and IOS each their own document and onclick both of them need to switch the name according the request. Unfortenatly the name switch in Javascript for the IOS document doesn’t work.

modelViewer.src = base + '.glb'; modelViewer.ios-src = base + '.usdz';

https://modelviewer.dev/examples/augmentedreality/#webXR

I know it’s quite a simple task and I should not use there an operator, but I don’t know how to solve this. How can I arrange both of them will switch their name?

Online source: Augmented Reality

    <model-viewer src="../../assets/ShopifyModels/Chair.glb" ios-src="../Chair.usdz"  poster="../Chair.png" shadow-intensity="1" ar ar-modes="webxr scene-viewer quick-look" camera-controls alt="A 3D model carousel">

  <button slot="ar-button" id="ar-button">
    View in your space
  </button>

  <div class="slider">
    <div class="slides">
      <button class="slide selected" onclick="switchSrc(this, 'Chair')">

      </button><button class="slide" onclick="switchSrc(this, 'Mixer')">
      
      </button><button class="slide" onclick="switchSrc(this, 'Canoe')">    
    </button></div>
  </div>
</model-viewer>

<script type="module">
  const modelViewer = document.querySelector("model-viewer");

  window.switchSrc = (element, name) => {
    const base = "../../assets/ShopifyModels/" + name;
    modelViewer.src = base + '.glb';
    modelViewer.ios-src = base + '.usdz';
    modelViewer.poster = base + '.png';
    const slides = document.querySelectorAll(".slide");
    slides.forEach((element) => {element.classList.remove("selected");});
    element.classList.add("selected");
  };

  document.querySelector(".slider").addEventListener('beforexrselect', (ev) => {
    // Keep slider interactions from affecting the XR scene.
    ev.preventDefault();
  });
</script>