Question

0

75

Views

Looping eventListener?

Hi you guys I'm new to JS and programming in general. Just started learning and was wondering out of curiosity is there a way to loop through click eventListener. So Each time I click on my h1 header with a title id I get the innerHTML changed kind of like a infinite shuffle ?

const element = document.getElementById("title");


element.addEventListener("click", function(){
    element.innerHTML = "Cool Right?";

    element.addEventListener("click", function(){
        element.innerHTML = "SoundPad";
    });
});

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T17:55:27.399Z

Create an array with the string you would like to cycle (strings)
Create an integer in which we will hold the current shown index (i)
Add click listener in which we will:
1. Check if our current index is at the last value, if so, cycle to 0
2. Set element.innerHTML to the index of the array
3. Bump the index

const element = document.getElementById("title");
const strings = [ 'Hello', 'How', 'Are', 'You', '?' ];
let i = 0;

element.addEventListener("click", () => {
    if (i === strings.length) i = 0;
    element.innerHTML = strings[i];
    i++;
});

<h1 id='title'>Starting Title</h1>

Instead off the 3 lines, we can simplify this in many ways:

Fancy one-liner using the same logic as above

element.addEventListener("click", () => element.innerHTML = strings[(i === (strings.length - 1)) ? (i = 0) : ++i]);

Using the modulo operator (%) to set i

element.addEventListener("click", () => {
     i = (i + 1) % strings.length
     element.innerHTML = strings[i];
});

0

75

Looping eventListener?

1 answers

0

Find remote jobs

Andres GPT