0

[Solved thanks to the best answer here]

The page is now finished and works smoothly. Take a look at the result on codepen:

https://codepen.io/Lietsaki/pen/pXOeKO

I'm making a simple website that contains some information about the Doge meme. I want some phrases to pop up in every section, so I added a class with "display: none" and set up some events in JS to remove the classes as the user clicks on the next section.

However, so far I've only been able to remove all classes at once instead of one class being removed every n seconds.

I've tried using a for loop with setInterval, but it didn't work. So I tried making a function that loops until a condition is met with setTimeout, but that removes all classes at once and throws a console error:

"Uncaught TypeError: Cannot read property 'classList' of undefined at addPhrase (whoisdoge.js:78) at whoisdoge.js:83"

Please check the code below.

// Select the phrases with the class ".phrase1"

var phrase1 = document.querySelectorAll(".phrase1");

// Turn it into an array and get its length(30) into a variable
var phrase1Arr = Array.from(phrase1);


// Function to remove a class every 3 seconds (NOT WORKING)

function addPhrase(l){

    phrase1Arr[l].classList.remove("disappear");

    if (l < 30){
       setTimeout(function(){
           l++;
           addPhrase(l)
       }, 3000);
    }

}
Lietsaki
  • 5
  • 1
  • 3
  • What is `phrase1l` ? Have you tried logging it? (The error suggests that `phrase1Arr` doesnt have 30 elements) – Jonas Wilms Jul 05 '19 at 17:37
  • `phrase1l = phrase1.length, I didn't need to use that variable at the end, shouldn't have included it in the code.` – Lietsaki Jul 05 '19 at 20:06

1 Answers1

0

Your function is breaking because you're trying to remove index 30 when there are only 30 elements in your array. (So you're trying to remove the 31st element)

You should move your remove into the same if statement that you already have.

function addPhrase(l){
  if (l < 30){
    phrase1Arr[l].classList.remove("disappear");
    setTimeout(function(){
      l++;
      addPhrase(l)
    }, 3000);
  }
}

You're also calling a function instead of referencing a function in your addEventListener calls:

sec0[0].addEventListener("click", addPhrase(0));

Should be

sec0[0].addEventListener("click", function(){
   addPhrase(0)
});
abney317
  • 7,760
  • 6
  • 32
  • 56
  • Thanks for your answer! This does solve the error, but now the function is executed on load instead of waiting for the click of the EventListener. Any idea on why this is happening? – Lietsaki Jul 05 '19 at 21:18
  • on page load? I'm not seeing anything executing – abney317 Jul 05 '19 at 22:21
  • I've just updated the pen to reflect the new changes. If you open up the console before clicking the "who is doge" title, you'll see that the classes "disappear" are being removed. They should start to disappear after clicking the button. – Lietsaki Jul 05 '19 at 22:51
  • Updated answer. – abney317 Jul 06 '19 at 16:33