Apparition progressive d'un texte lettre par lettre

**d3LTa7** · 03/07/2019, 18h04

Coucou !!

Je cherche a faire apparaitre un texte progressivement suite a une animation déjà existante

Voilà mon code

Bon... mon code est super répétitif et j'imagine que l'on peut faire plus simple, notamment avec un tableau, mais je suis un peut novice en JS donc si vous avez des suggestions par rapport à ça, ce sera avec grand plaisir de les prendre... Par contre avec des explications assez clair que je puisse comprendre :p

En ce qui concerne ma question, j'ai essayé un truc qui ne fonctionne pas... Là, pareil, je veux bien que l'on m'explique ce qui serais sympa de faire

Merci d'avance =)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="OF.css" />
        <title>Titre</title>
    </head>
    <body>
        <div class="photoanim">
            <div id="image" class="image">
                <img id="foto" src="moioim.jpg">
                <img id="photo" src="moitr.jpg">
                <nav>
                    <ul id="nav">
                        <li><a href="#moa" id="moi">Moi</a></li>
                        <li><a href="#asso" id="asso">Mes Associations</a></li>
                        <li><a href="#video" id="video">Vidéo</a></li>
                        <li><a href="#xp" id="xp">Experiences Professionnelles</a></li>
                        <li><a href="#dip" id="dip">Diplome et Formation</a></li>
                        <li><a href="#motiv" id="motiv">Motivation</a></li>
                        <li><a href="#site" id="site">Site et Reseaux Sociaux</a></li>
                    </ul>
                </nav>
 
            </div>
            <div id="corp" class="corp">
                <div id="titre" class="titre">
                    <p class="lettre" id="lettre">O</p>
                    <p class="lettre" id="lettre">U</p>
                    <p class="lettre" id="lettre">I</p>
                </div>
                <div id="cadre" class="cadre">
                </div>
            </div>
 
        </div>
    </body>
    <script src="OF.js"></script>
</html>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
.photoanim img
{
    width: 250px;
    border-radius: 50%;
    border: 2px solid white;
}
 
.photoanim
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
 
.image
{
    padding: 0px;
    margin: 0px;
    width: 400px;
}
nav ul
{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    list-style-type: none;
    justify-content: space-between;
}
nav ul li a
{
    color: white;
	font-family: 'Pangolin', cursive;
	font-size: 1em;
    text-decoration: none;
    border: #311FD2 1px solid;
    border-radius: 15px;
    background: #311FD2;
    padding: 5px;
}
 
nav ul li a:hover
{
    background: #CFD595;
    color: #5CC1F3;
}
nav ul li
{
    margin: 15px;
}
body{
    background-image: url(bckgrnd.png); 
    background-repeat: no-repeat;
    background-size: cover;
}
 
#bandeau
{
    width: 100px;
}
.corp
{
    display: flex;
    flex-direction: column;
    margin: auto;
}
.titre
{
    display: flex;
    flex-direction: row;
}

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
var tof = document.getElementById('foto');
tof.style.position = "absolute";
var topPos = 0;
var dir = -1;
 
 
document.getElementById('moi').style.visibility = 'hidden';
document.getElementById('asso').style.visibility = 'hidden';
document.getElementById('video').style.visibility = 'hidden';
document.getElementById('xp').style.visibility = 'hidden';
document.getElementById('dip').style.visibility = 'hidden';
document.getElementById('motiv').style.visibility = 'hidden';
document.getElementById('site').style.visibility = 'hidden';
function down(){
    topPos += -2 * dir;
    tof.style.top = `${topPos}px`;
    requestAnimationFrame(down);
    if (topPos == 300){
        appar1();
    }
    if (topPos == 350){
        appar2();
        o1()
    }
    if (topPos == 400){
        appar3();
        o2()
    }
    if (topPos == 450){
        appar4();
        o3()
    }
    if (topPos == 500){
        appar5();
    }
    if (topPos == 550){
        appar6();
        o4()
    }
    if (topPos == 600){
        appar7();
    }
    if (topPos == 650){
        dir = 0;
        o5()
    }
}
 
requestAnimationFrame(down);
 
function appar1(){
    document.getElementById('moi').style.visibility = 'visible';
}
function appar2(){
    document.getElementById('asso').style.visibility = 'visible';
}
function appar3(){
    document.getElementById('video').style.visibility = 'visible';
}
function appar4(){
    document.getElementById('xp').style.visibility = 'visible';
}
function appar5(){
    document.getElementById('dip').style.visibility = 'visible';
}
function appar6(){
    document.getElementById('motiv').style.visibility = 'visible';
}
function appar7(){
    document.getElementById('site').style.visibility = 'visible';
}
 
function o1(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.1
}
function o2(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.3
}
function o3(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.5
}
function o4(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.7
}
function o5(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 1
}

**danielhagnoul** · 03/07/2019, 21h33

Il y a déjà quelque temps, lorsque je travaillais en jQuery, j'avais écrit un plugin pour faire ce travail : https://www.developpez.net/forums/d1...e/#post7019334

Voici la version JS de ce plugin :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<article></article>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const defaults = {
        "backgroundColor": "#ffffff",
        "color": "#000000",
        "fontFamily": "cursive",
        "fontSize": "1.2em",
        "fontWeight": "normal",
        "lineHeight": "1.5em",
        "letterSpacing": "0.15em",
        "mozHyphens": "auto",
        "webkitHyphens": "auto",
        "msHyphens": "auto",
        "hyphens": "auto",
        "interval": 100,
        "text": ""
    };
 
    const str1 = "Croce est celui qui a exprimé la plus forte hostilité au genre, et son influence a été grande." +
        " Il opposait intuition et logique. À ses yeux, les catégories génériques pervertissent les réactions " +
        "du lecteur qui tente de les appliquer à une oeuvre particulière ; elles le font passer " +
        "d'une réaction intuitive à une réaction logique. De ce point de vue anti-théorique, une " +
        "classification générique de la littérature est un déni de la nature même de la littérature " +
        "et fait violence à la sensibilité du critique et à l'individualité de l'objet. Toute oeuvre " +
        "véritable brise les lois génériques ; la recherche de classifications formelles est donc non " +
        "pertinente et dangereuse. « Tout véritable chef-d'oeuvre a violé la loi d'un genre établi, semant " +
        "ainsi le désarroi dans l'esprit des critiques, qui se virent dans l'obligation d'élargir " +
        "ce genre » (1902, cité dans Théorie des genres, p. 41).";
 
    const dvjhEcrit = (options, parent) => {
        let
            opts = Object.assign({}, defaults, options),
            interval = parseInt(opts.interval, 10) || 100,
            tabChaine = opts.text,
            longueur = tabChaine.length,
            conteneur = document.createElement('div'),
            showText = k => {
                if (k < longueur) {
 
                    //$(conteneur).append(tabChaine[k++]);
 
                    conteneur.append(tabChaine[k++]);
 
                    setTimeout(function () {
                        showText(k);
                    }, interval);
                }
            };
 
        conteneur.style = {
            "backgroundColor": opts.backgroundColor,
            "color": opts.color,
            "fontFamily": opts.fontFamily,
            "fontSize": opts.fontSize,
            "fontWeight": opts.fontWeight,
            "lineHeight": opts.lineHeight,
            "letterSpacing": opts.letterSpacing,
            "-moz-hyphens": opts.mozHypens,
            "-webkit-hyphens": opts.webkitHypens,
            "-ms-hyphens": opts.msHypens,
            "hyphens": opts.hyphens
        };
 
        parent.appendChild(conteneur);
 
        showText(0);
    }
 
    dvjhEcrit({
        "text": str1
    }, document.querySelector('article'));
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

**d3LTa7** · 04/07/2019, 12h47

Merci pour ta réponse... Mais comme tu as sans doute pu le constater de part mon code, tu t'imagines bien que je n'ai pas le niveau pour comprendre ton code... Et du coup beaucoup de passage me pose question...
Déjà tu utilise des "const" et des "let" alors que moi je n'utilise que des "var" Mais j'ai cru comprendre qu'il était mieux d'utiliser const et let... Mais tu les utilises d'une certaine manière... Par exemple tu fais une variable const en y mettant des propriété css... Là tu m'embrouille déjà un peu...
En faite je crois que j'ai pas encore la gymnastique des écritures en raccourcis... comme par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var maVariable = document.getElementById("idDeMonDOM")
maVariable.style.visibility = "visible"

Qui peut s'écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("idDeMonDOM").style.visibility = 'visible'

La je crois que tu en utilise plein et du coup tu m'as perdu sur pas mal de ligne

Toute la partie "const dvjhEcrit" pas compris à part peut être le "createElement"

Bref je sais que j'en demande peut être beaucoup, mais c'est vrai que je n'aime pas c/c bêtement sans comprendre ce que je fais

Invité · 04/07/2019, 17h51

Bonjour,

Autre script (jQuery) : https://codepen.io/jreaux62/pen/djNZLb

**d3LTa7** · 04/07/2019, 21h27

Merci JReaux !! Je vais essayé de décortiquer ça même si je ne maitrise pas encore le JQueray !!

Edit : Hummmm j'ai vraiment du mal encore avec JQuery, je pense que je vais m'y mettre dans pas longtemps (d'ailleurs je suis preneur de tout liens vers des cours sympa à ce sujet)... En attendant, et désolé de te demander ça, mais je pourrais avoir une version purement JS ? Merci !

**Beginner.** · 06/07/2019, 01h39

Envoyé par d3LTa7

Edit : Hummmm j'ai vraiment du mal encore avec JQuery, je pense que je vais m'y mettre dans pas longtemps (d'ailleurs je suis preneur de tout liens vers des cours sympa à ce sujet)... En attendant, et désolé de te demander ça, mais je pourrais avoir une version purement JS ? Merci !

JQuery n'est pas indispensable, en JS pur ce n'est pas plus compliqué, voici le code en JS pur : https://playcode.io/364844?tabs=script.js,preview

**d3LTa7** · 06/07/2019, 11h28

Merci merci Beginner !! Vraiment sympa !!
(t'as plus l'air "beginner" dans ce domaine en tout cas)
Bon week end à vous =)

**javatwister** · 06/07/2019, 12h06

Et un ptit dernier pour le plaisir;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
const T={
	m:(q) => {return document.getElementById(q).firstChild},
	mess:"Quel texte innovant! Je suis scié.",
	bouge:() => {t=setInterval(() => 
					{
						if(T.mess){
							T.m("m2").data+=T.mess[0];
							T.mess=T.mess.slice(1);
						}
						else {
							clearInterval(t)
						}
					}
					,100)
				}
 
}	
window.addEventListener("load",() => T.bouge());
 
</script>
 
<div  id="m2"> </div>

**d3LTa7** · 06/07/2019, 16h53

Merci javatwister !!
Je garde tout ca sous le coude !! Pour le moment ton code est encore un peu complexe pour moi !! Mais j'espère que je le comprendrais un jour =D
Pour le moment, celui de beginner est celui que je comprend le mieux :p

**Beginner.** · 06/07/2019, 20h31

Envoyé par d3LTa7

Pour le moment, celui de beginner est celui que je comprend le mieux

Ben en fait j'avais juste transformé le code en JS pur mais on pourrait faire encore plus simple : une fonction paramétrable : tu mets juste les paramètres que tu veux container, text et delay...

Voici un exemple : https://playcode.io/365336?tabs=scri...review,console

J'utilise que des choses simples (une boucle for classique...).

**melka one** · 08/07/2019, 10h52

jour

créer plusieurs timeout c'est pas très propre.

Invité · 08/07/2019, 11h03

Bonjour,

A PART les codes que j'ai proposé (jQuery), et traduit en JS pur par Beginner :

Envoyé par jreaux62

Autre script (jQuery) : https://codepen.io/jreaux62/pen/djNZLb

JQuery n'est pas indispensable, en JS pur ce n'est pas plus compliqué, voici le code en JS pur : https://playcode.io/364844?tabs=script.js,preview

TOUS LES AUTRES présentes un DÉFAUT MAJEUR :

les textes ne sont "accessibles" (car PAS écrits dans le HTML, mais dans le script JS) !
Les logiciels d'aide à la lecture ne les "voient" pas.

Cela dit, il suffit de pas grand chose pour les adapter...

**d3LTa7** · 08/07/2019, 16h19

Ha oui Jreaux !! Bien vu et effectivement c'est mon cas...
Je pourrais evidement choisir l'option de facilité et déplacer mon texte dans le JS, mais ceci dit j'ai choisis de savoir comment faire en laissant mon texte dans le HTML...

Du coup, en suivant l'exemple de Beginner ( https://playcode.io/365336?tabs=scri...review,console), j'ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var text = document.getElementById('montexte').textContent;

pour le reste j'ai fait tout pareil en ayant créé une div dans mon HTML pour la variable container.

Mais il a pas l'air d'aimer et me met plein de "undefined"

**SpaceFrog** · 08/07/2019, 16h57

Juste pour le fun une autre version

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
OutChaine="";
InChaine="un texte a faire apparaitre lettre par lettre";
InChaine=InChaine.split('');
function sendletter(){
if (InChaine.length>0){
document.getElementById('res').innerHTML += InChaine.shift();
setTimeout(sendletter,200)
}
}
 
sendletter();

**Beginner.** · 08/07/2019, 17h40

Envoyé par d3LTa7

Ha oui Jreaux !! Bien vu et effectivement c'est mon cas...
Je pourrais evidement choisir l'option de facilité et déplacer mon texte dans le JS, mais ceci dit j'ai choisis de savoir comment faire en laissant mon texte dans le HTML...

Ben justement il me semble que jreaux62 dit que c'est un défaut que le texte ne soit pas dans le HTML...

Envoyé par d3LTa7

Du coup, en suivant l'exemple de Beginner ( https://playcode.io/365336?tabs=scri...review,console), j'ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var text = document.getElementById('montexte').textContent;

Plutôt que passer le texte autant juste passer l’élément HTML (container) qui contient le texte : https://playcode.io/366919?tabs=scri...review,console (j'ai modifié le code pour que le texte soit dans le HTML...)

**d3LTa7** · 10/07/2019, 18h37

Alors moi ce qui est "marrant" c'est qu'il me dit dans la console "text is undefined" Alors que j'ai fait tout pareil :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
var container = document.getElementsByClassName('montext');
var delay = 100;
 
function animate(container, delay){
    var text = container.textContent;
    container.textContent = "";
    for (var i = 0; i < text.length; i++) {
        setTimeout(function (){
            container.textContent += text[i];
        }, delay * i);
    }
}

Alors est ce que le souci viendrait du faite que j'apelle la fonction dans une autre ?
voila la suite du JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
var clik = document.querySelectorAll('.moi');
clik.forEach(function(clic){
    clic.addEventListener('click',function(){
        var moitext = document.getElementById('textmoi')
    });
});
*/
function dispwelk(){
    document.getElementById('welk').style.display = "none"
}
 
document.getElementById('moi').onclick = function(){ 
    //document.getElementById('textmoi').style.display = "block";
    animate(container, delay);
    dispwelk();
 
      }
document.getElementById('textmoi').style.display = "none";

et la partie HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ul id="nav">
      <li><a href="#moa" id="moi" class="moi">Moi</a></li>
</ul>
<div id="cadre" class="cadre">
      <p id="welk"> BIENVENUE </p>
      <div class="textmoi" id="textmoi"> Bonjour ! je suis un homme de 38 ans qui essaye d'apprendre Javascript !</div>
</div>

**Beginner.** · 10/07/2019, 18h57

Envoyé par d3LTa7

Alors moi ce qui est "marrant" c'est qu'il me dit dans la console "text is undefined" Alors que j'ai fait tout pareil :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var container = document.getElementsByClassName('montext');
...

Ici container n'est pas un élément html mais une HTMLCollection... Il faut ajouter [0] pour récupèrer le premier élèment de cette collection : var container = document.getElementsByClassName('montext')[0];...

Sinon tu peux faire var container = document.querySelector(".montext");...

EDIT : Ah oui il y a un autre problème : dans ton code il n'y a pas d’élément ayant la class "montext" donc c'est normal que container soit indéfini... Il faut donc remplacer "montext" par "textmoi"... Ou comme tu as aussi mis un id tu peux faire : var container = document.getElementById("textmoi");...

EDIT2 : Un autre problème il faut utiliser let et non var dans la boucle for : for (let i = 0; i < text.length; i++)Test ici : https://playcode.io/369893?tabs=scri...review,console

**d3LTa7** · 14/07/2019, 22h06

C'est parfait !! Merci beaucoup Beginner !! Mais je crois que je vais t’embêter encore un peu désolé !!

Si par malheur je reclick sur le lien il me met des textes assez étrange... Du coup je voulais empêcher le double clic sur le href...

(j'ai revu un peu la partie JS, qui pourrait sembler primitif, mais moi je m'y retrouve mieux ^^ )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var boutonmoi = document.getElementById('moi');
boutonmoi.addEventListener('click',butonme);
 
function butonme(){
    document.getElementById('textmoi').style.display = 'block';
    animate(container, delay);
    dispwelk();
    boutonmoi.disabled = true;
}

Mais le .disabled n'a pas l'air de marcher sur ce cas de figure :/ ou alors il ne faudrait pas que je le mettent là

EDIT : je pense avoir trouvé une solution avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

boutonmoi.removeEventListener('click',butonme);

Du coup je voudrais "exporter" cette fonction d'animation sur plusieurs "li" mais je me retrouve confronter à un autre souci...

J'ai tenté une variante :

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var container = document.getElementClassName("text");
var delay = 20;
 
function animate(container, delay){
    var text = container.textContent.trim();
    container.textContent = "";
    for (let i = 0; i < text.length; i++) {
        setTimeout(function (){
            container.textContent += text[i];
        }, delay * i);
    }
}
 
function dispwelk(){
    document.getElementById('welk').style.display = "none"
}
 
var boutonmoi = document.getElementById('moi');
boutonmoi.addEventListener('click',butonme);
 
var boutonxp = document.getElementById('xp');
boutonxp.addEventListener('click',butonxp);
 
function butonme(){
    document.getElementById('textmoi').style.display = 'block';
    animate(container, delay);
    dispwelk();
    boutonmoi.removeEventListener('click',butonme);
}
function butonxp(){
    document.getElementById('exp').style.display = 'block';
    animate(container, delay);
    dispwelk();
    boutonxp.removeEventListener('click',butonxp);
}
 
document.getElementById('textmoi').style.display = "none";
document.getElementById('exp').style.display = "none";

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<ul id="nav">
      <li><a href="#moa" id="moi" class="moi">Moi</a></li>
      <li><a href="#xp" id="xp" class="xp">Expérience</a></li>
</ul>
<div id="cadre" class="cadre">
      <p id="welk"> BIENVENUE </p>
      <div class="text" id="textmoi"> Bonjour ! je suis un homme de 38 ans qui essaye d'apprendre Javascript !</div>
      <div class="text" id="exp"> J'ai peu d'expérience dans le domaine du développement web mais je suis motivé pour apprendre !</div>
</div>

A la base, ma variable "container" était lié à une "id". et cette id est aussi utilisé dans ma fonction "butonme". Le plus simple aurait été de changer la façon de prendre l'élément du DOM par un autre moyen que getElementById de ce faite je peux faire une fonction pour chaque lien (moi et experience) en restant sur l'id (butonme et butonxp) mais avec "class='text" en commun dans le HTML pour que ma fonction "animate" soit utilisable sur chaque... mais apparemment

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var container = document.getElementByClassName('text')

ne marche pas

J'ai tenté avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var container = document.querySelector('.text');

Curieusement cela marche avec la partie "moi" mais pas avec l'autre

**Beginner.** · 15/07/2019, 17h04

Salut,

- Une remarque dans ton code JS tu as écris : var container = document.getElementClassName("text"); il manque By : var container = document.getElementsByTagName("text");.

- Ensuite tu n'as pas besoin de la class text ni de container, chaque élément est un container (qui contient un texte à afficher)... Mais ton usage de container avec la class text ne fonctionne pas car tu fais cela : animate(container, delay); au lieu de animate(container[0], delay); et animate(container[1], delay);...

J'avais expliqué ce problème dans mon message précédent...

- Utilise donc juste les id de chaque élément...

J'ai modifié un peu ton code, tu peux tester ici : https://playcode.io/374915?tabs=scri...review,console

-------------------------------------
PS : Au lieu de faire cela :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById('textmoi').style.display = "none";
document.getElementById('exp').style.display = "none";

Tu pourrais utiliser du CSS, ce serait mieux d'ailleurs...

**d3LTa7** · 17/07/2019, 10h15

Haaaaa oui !! J'ai compris !!! Désolé je suis un peu long à la détente !! J'ai encore du mal avec les paramètres des fonctions...

Et oui en mettant "display: none;" dans la partie CSS ça marche tout aussi bien !!

Mais par contre ma solution du "removeEventListener" n'est pas la bonne apparemment car si je click sur "Moi" puis sur "Expérience" et que je revient sur "Moi", là il ne veut plus me remettre le texte... Et du coup mon souci de base revient...

Apparition progressive d'un texte lettre par lettre

JavaScript

Discussions similaires

Partager

Partager