title: Trying to make a js class for html (Changing background image every few seconds), need a helping hand
body: <p>Hello i am trying to make a class to have numerous object changing background images on a site without creating each object one by one.</p>
  <p>So i have done this to change the background image of one &quot;object&quot; :</p>
  <pre><code>let x = 0; //index
  
  const image = [&quot;assets/img1.jpeg&quot;, &quot;assets/img2.jpeg&quot;, &quot;assets/img3.jpeg&quot;]; //images to show
  
  function displayNextImage() {
      x = (x === 2) ? 0 : x + 1;
      document.getElementById(&quot;myID&quot;).setAttribute(&quot;style&quot;, &quot;background-image: url(&quot; + image[x] + &quot;)&quot;) //change images 
  };
  
  function startTimer() {
      setInterval(displayNextImage, 3000); //start looping
  }
  
  startTimer();
  </code></pre>
  <p>It work and so i want to make it a class :</p>
  <pre><code>class changingImageObject {
      constructor(img1, img2, img3, id) {
          this.image = [img1, img2, img3];
          this.id = id;
          this.x = 0;
      };
  
      displayNextImage() { //Change the showed image x+1
          this.x = (this.x === 2) ? 0 : this.x + 1;
          document.getElementById(this.id).setAttribute(&quot;style&quot;, &quot;background-image: url(&quot; + this.image[this.x] + &quot;)&quot;);
      };
  
      startTimer() { //Change image after 3sec (looping)
          setInterval(this.displayNextImage, 3000);
      };
  }
  
  const changingImages = new changingImageObject(&quot;assets/img1.jpeg&quot;, &quot;assets/img2.jpeg&quot;, &quot;assets/img3.jpeg&quot;, &quot;myID&quot;);
  changingImages.startTimer();
  </code></pre>
  <p>I added the script at the end of the html, it create the object but the displayNextImage function give a error : Uncaught TypeError: Cannot read property 'setAttribute' of null
  at displayNextImage</p>
  <p>Thx for reading</p>