Je veux faire une nouvelle ligne entre l'édition et devenir. J'ai essayé \ n mais cela n'a pas fonctionné. Un indice?

var i = 0;
var text = "Animation - Web Development- Video Editing Become a member & More.";

function typeWriter(){
    if(i < text.length){
        document.getElementById("text").innerHTML += text.charAt(i);
        i++;
        setTimeout(typeWriter, 50);
    }
}
typeWriter();
0
7mo0do 2 juin 2020 à 18:32

3 réponses

Meilleure réponse

Ajoutez un saut de ligne à votre chaîne avec \n. Dans votre code, vérifiez si un saut de ligne est le caractère, si c'est le cas, remplacez-le par <br/>

var i = 0;
var text = "Animation - Web Development- Video Editing\nBecome a member & More.";

function typeWriter() {
  var ch = text.charAt(i)
  if (ch === '\n') {
    ch = '<br/>'
  }
  document.getElementById("text").innerHTML += ch
  i++;
  i < text.length && setTimeout(typeWriter, 50);
}
typeWriter();
<div id="text"></div>
0
epascarello 2 juin 2020 à 15:54

Étant donné que HTML ne rend pas les sauts de ligne, vous devez ajouter une condition dans votre fonction ou adapter votre code HTML.

Solution n ° 1

Mettez à jour votre fonction Javascript, ajoutez un cas particulier dans votre première instruction if:

var i = 0;
var text = "Animation - Web Development- Video Editing Become a member & More.";

function typeWriter(){
  if(i < text.length){
    if(text.charAt(i) === "\n") 
      document.getElementById("text").innerHTML += "<br/>";
    document.getElementById("text").innerHTML += text.charAt(i);
    i++;
    setTimeout(typeWriter, 50);
  }
}
typeWriter();

Dans ce cas, HTML rendra la balise <br/> en ajoutant une nouvelle ligne. N'oubliez pas d'ajouter le \n dans votre variable text.

Solution n ° 2:

Utilisez la balise HTML <pre>, non recommandée, mais le contenu sera également rendu, sans modifier votre fonction Javascript.

<pre id="text"></pre>
0
Community 20 juin 2020 à 09:12

Je pense que /n n'est pas une bonne pratique ici, si vous recevez ces données d'une API tierce par exemple, vous ne pourrez pas obtenir /n dans le texte. Donc, votre meilleur pari est de vérifier le mot exact que vous recherchez et d'ajouter une ligne de rupture après lui.

Explication de la solution

La valeur booléenne wordCheck est définie sur true par défaut, donc notre condition ci-dessous continue de fonctionner, jusqu'à ce que nous trouvions le mot Editing dans le texte imprimé. Dans ce cas, nous ajoutons un saut de ligne, définissons la valeur false sur wordCheck pour éviter d'ajouter des sauts de ligne plus tard.

J'ai mis en cache l'élément txtElement pour une meilleure lisibilité du code.

var i = 0;
var text = "Animation - Web Development- Video Editing Become a member & More.";
var wordCheck = true;

function typeWriter(){
  var txtElement = document.getElementById("text");
  
  if(i < text.length){
    txtElement.innerHTML += text.charAt(i);
    i++;
    setTimeout(typeWriter, 50);

    // Here's we detect if the value reached the word "Editing", if so, we do break line
    var currentVal = txtElement.innerHTML;
    if(wordCheck && currentVal.indexOf('Editing') >= 1) {
      txtElement.innerHTML += "<br>";
      wordCheck = false;
    }
  }
}
typeWriter();
<p id="text"></p>
0
Elharony 2 juin 2020 à 16:23