2
votes

Est-il possible d'altérer innerHTML / textContent d'avant en arrière (sans fin)?

Je pense donc à changer le HTML interne de

Cliquez

du contenu de "Clic" en "Cliqué" et lorsque l'on clique à nouveau, il redevient "Clic" (et pourrait être cliqué à nouveau pour obtenir le résultat "Cliqué" pendant des temps interminables).

Quelqu'un peut-il donner un indice? * J'apprécie,

Ceci est ma tentative d'échec jusqu'à présent ->

<!DOCTYPE html>
<body>
<p id="event_01">Click</p>

<script>
    let goo = document.querySelector("#event_01");

    let clickOnce = function() {goo.innerHTML = "Clicked"};

    let clickBack = function(){
    goo.innerHTML = "Click"};

    if(goo.textContent == "Click") {
        goo.addEventListener("click", clickOnce);
    } else if (goo.textContent == "Clicked") {
        goo.addEventListener("click", clickBack);
    }

</script>

</body>

javascript html addeventlistener frontend

1 commentaires

Merci à M. Mohammedreza Farahani d'avoir édité une erreur sur mon code. ;) apprécier!

5 Réponses :

0
votes

Il vous suffit de vérifier la valeur du .innerHTML du

, de la comparer au .innerHTML actuel et de la modifier en conséquence

<!DOCTYPE html>
       <body>
       <p id="event_01" onClick="myFunction()">Click</p>
       <script>

           function myFunction() {
               var x = document.getElementById("event_01");
               if (x.innerHTML === "Click") {
                    x.innerHTML = "Clicked";
               } else {
                    x.innerHTML = "Click";
               }
           }

       </script>
       </body>

0 commentaires

0
votes

Vous n'avez besoin que d'un seul auditeur, attaché depuis le début:

let goo = document.querySelector("#event_01");
goo.addEventListener("click", clickListener);

let clickListener = function() {
    if (goo.innerHTML == "<p>Click</p>")
        goo.innerHTML = "<p>Clicked</p>";
    else
        goo.innerHTML = "<p>Click</p>";
}

0 commentaires

1
votes

Vous devriez mettre votre condition dans un gestionnaire de clics plutôt qu'à l'extérieur. Ce qui se trouve entre la balise de script ne s'exécutera qu'une seule fois. Lorsque le code s'exécute (lors du chargement de la page), le contenu de goo est Click, donc seul l'auditeur qui définit le contenu sur "cliqué" est attaché à l'élément. à la place, vous devriez faire quelque chose comme ceci:

let goo = document.querySelector("#event_01");

let onClick = function() {
    if(goo.textContent == "Click"){
        goo.innerHTML = "Clicked";     
    } else {
        goo.innerHTML = "Click";
    }
};


goo.addEventListener("click", clickOnce);

2 commentaires

Merci Monsieur. Il semble que ce soit juste une question très facile pour tout le monde. ;) merci encore @ Alen.Toma

Probablement "facile" si vous êtes un ingénieur frontend expérimenté :)

0
votes

C'est simple. votre ajout à beaucoup de code. tout d'abord lorsque l'utilisateur clique sur p, vous attribuez un événement click à clickOnce mais en clickOnce retour vous n'attribuez jamais clickBack.

Voici un exemple de ce que vous voulez faire.

       <p id="event_01">Click</p>

       let goo = document.querySelector("#event_01");

       let clickMe = function() { 
       if(goo.textContent == "Click")
       {
         goo.innerHTML = "Clicked";
       }
       else
       {
         goo.innerHTML = "Click";
       }
       
       }


    
     goo.addEventListener("click", clickMe);

0 commentaires

0
votes

Si vous ne souhaitez pas utiliser de fonctions ou de variables, vous pouvez utiliser e.target.textContent

<!DOCTYPE html> 
<body>
    <p id="event_01">Click</p>
    <script>
        document.querySelector("#event_01").addEventListener('click', (e) => {
            if (e.target.textContent === 'Click') {
                e.target.textContent = 'Clicked'
            } else if (e.target.textContent === 'Clicked') {
                e.target.textContent = 'Click'
            }
        })
    </script>
</body>

0 commentaires