If you just want to keep changing the text every time a click occurs, you don’t need one loop, let alone register the same functions several times. Just register once, a single function that checks the current text and changes it to the other value:
document.addEventListener("click", function() {
let elemento = document.querySelector('div#mod');
if (elemento.innerText === 'Claro') {
elemento.innerText = 'Escuro';
} else {
elemento.innerText = 'Claro';
}
});
Clique para mudar o texto<br>
<div id="mod">
</div>
Note that so you don’t need to keep registering functions at all times. Simply register Listener once, the function takes care to check the current text and change it.
If you want to have several text options and switch between them, an alternative is to create an array with the possible texts and iterate through them:
var opcoes = ['Claro', 'Escuro', 'Branco', 'Cinza'];
var counter = 0;
document.addEventListener("click", function() {
document.querySelector('div#mod').innerText = opcoes[counter];
counter = (counter + 1) % opcoes.length;
});
Clique para mudar o texto<br>
<div id="mod">
</div>
The operator %
(rest of the split) ensures that I return to the beginning of the array when the counter exceeds the size of the same.
Because your code didn’t work
The way you did, you were booking a Listener new with each click, because addEventListener
has cumulative effect: every time you call her, you’re registering a new Listener, which will be executed along with others who were already registered. This causes the functions to be performed several times.
See the example below (it is basically your code with some modifications to understand better what is happening):
var i = 0;
document.addEventListener("click", principal);
function principal() {
console.log(i++, 'principal');
document.addEventListener("click", teste);
function teste() {
console.log(i++, 'Claro');
document.addEventListener("click", teste1);
}
function teste1() {
console.log(i++, 'Escuro');
document.addEventListener("click", teste);
}
}
Clique para disparar as chamadas das funções<br>
<div id="mod">
</div>
First we register the function principal
in the click event.
And the first time you click, it performs the function principal
, that does not call the other functions (she only registers the click event to call the function teste
, but teste
not yet called here) and prints "0 principal"
.
Then, when you click again, it performs the function principal
(printing "1 principal"
and records another click event to call teste
- I mean, we now have 2 calls to teste
registered). Then the function is executed teste
(which was recorded when we first clicked), which prints "2 Claro"
and records the click event to call teste1
.
Next time you click, it runs principal
, teste
twice (as we record the respective event twice) and teste1
(printing "3 principal"
, "4 Claro"
, "5 Claro"
and "6 Escuro"
). Remembering that the call to principal
records another event to call teste
, and every call from teste
records another event to call teste1
.
And teste1
, in turn, records another click event to call teste
(that will register another event to call teste1
every time it is called and so on). After a few clicks, it will be impossible to control and understand what is happening.
So the best solution is to register the event only once.