Affecting multiple elements in a-frame with one script

Question

I'm trying to do 4 things when a videosphere is clicked:

1. Play the video texture of the clicked videosphere.
2. Expand the radius of the clicked videosphere to 4200.
3. Make all elements with the class "homeworld" to disappear.
4. make the 2 other videospheres (which cannot have homeworld as a class) disappear.

I approached #4 with an if/else if but something isn't working. The code was working through #3 but when I tried added the code for #4 the other videospheres still won't disappear, though the rest of the code ran fine.

Here's the code I used:

AFRAME.registerComponent('play-and-expand', {
        init: function () {
        
          this.el.addEventListener('click', this.playAndExpand.bind(this));
         
        playAndExpand: function () {
          
          const videoId = this.el.getAttribute('src');
          const video = document.querySelector(videoId);
          const clickedSphere = this.el.getAttribute('id');

          
          if (video) {
          
            video.play();

            this.el.setAttribute('radius', '4200'); 

            const homeworldElements = document.querySelectorAll('.homeworld');
            homeworldElements.forEach(element => {
              element.setAttribute('visible', false);
            });
              
           }

            if (clickedSphere === 'sphere1') {
              hideElements(['sphere2', 'sphere3']);
            } else if (clickedSphere === 'sphere2') {
              hideElements(['sphere1', 'sphere3']);
            } else if (clickedSphere === 'sphere3') {
              hideElements(['sphere1', 'sphere2']);
            }
      }
    
});

I'm still very new to JS but I've spent hours on this and still can't figure it. Thanks in advance for any help!

Answer 1

hideElements: function (ids) {
  ids.forEach(id => {
    const element = document.getElementById(id);
    if (element) {
      element.setAttribute('visible', 'false');
    }
  });
}

function should be included as part of the AFRAME component play-and-expand you are defining. It takes an array of element IDs and iterates over this array. For each ID, it finds the corresponding element in the DOM and sets its visible attribute to false to hiding it.