Discussion :

[Lexlaflex]

Bonjour à tous,
Je créé actuellement mon premier site web où j'essaie d'incorporer quelques éléments en JS.
Il s'agit d'un portfolio donc j'ai souhaité mettre la présentation sous forme de questions qui, quand on clic dessus génère une réponse avec un TypeWritter, j'ai suivi un tuto et ça à plutôt bien marché ( je comprends à 80% la structure) mais il à un point qui bloque et je ne trouve pas de réponse sur le net ( ou du moins je comprends pas la solution ) le voici : Quand je clic sur la première ligne cela affiche la réponse de 1ère, mais si je clic sur disons la 3ème cela affichera la 3ème mais aussi les 2 précédentes.

Le code est assez simple :

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
var i = "";
var txt1 = ' test1 '; 
var i2 = "";
var txt2 = ' test2 '; 
 
function typewriter()
 {
  if (i < txt1.length)
    {
      document.getElementById("demo").innerHTML += txt1.charAt(i);
      i++;
      setTimeout(typewriter, speed);
 
    }
  else if (i2 < txt2.length)
    {
      document.getElementById("demo2").innerHTML += txt2.charAt(i2);
      i2++;
      setTimeout(typewriter, speed);
 
  }

[Invité]

Bonjour,

Tellement "simple" qu'il est... incomplet...
Impossible de tester.

[Lexlaflex]

Ha désole , je n'ai pas l'habitude de poster du code, je devrais envoyer tout le code 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
var i = "";
var txt1 = 'this is actually the test'; 
var i2 = "";
var txt2 = 'this is actually the test';
var i3 = "";
var txt3 = 'this is actually the test';
 
 
var speed = 100; 
 
 
function typewriter()
 {
  if (i < txt1.length)
    {
      document.getElementById("demo1").innerHTML += txt1.charAt(i);
      i++;
      setTimeout(typewriter, speed);
    }
  else if (i2 < txt2.length)
    {
      document.getElementById("demo2").innerHTML += txt2.charAt(i2);
      i2++;
      setTimeout(typewriter, speed);
    }
      else if (i3 < txt3.length)
        {
          document.getElementById("demo3").innerHTML += txt2.charAt(i3);
          i3++;
          setTimeout(typewriter, speed);
 
      }
 
  }

Et pour le

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<!--Liste Questions : Quel est ? -->
  <h3 onclick="typewriter()">● Quel est votre nom?</h3>
  <div id="demo1"> </div>
 
  <!-- that is a try  -->
  <h3 onclick="typewriter()">● Quel est votre âge?</h3>
  <div id="demo2"> </div>
 
  <h3 onclick="typewriter()">● Quel est votre lieu d'habitation?</h3>
  <div id="demo3"> </div>

[SpaceFrog]

machine à écrire = lettre à lettre ?
Si oui quelques posts plus bas ...
https://www.developpez.net/forums/d1...lettre-lettre/