0

I don't know how the correct structure would be to return a word to which the color of the middle letter is modified. I use a split to save all the words of a paragraph in an array, but I must modify each of these words, showing them with their middle letter in red. Investigating, I think I can use the slice method to modify the font color. This is my code:

HTML

  <body>
    <textarea id="text">JavaScript is the Programming Language for the Web, JavaScript can update and change both HTML and CSS, JavaScript can calculate, manipulate and validate data</textarea>
    <div class="show">
      <h3 id="txt"></h3>
    </div>
    <div class="control-box">
      <button type="button" name="button" onclick="iniciar()">play</button>
    </div>
  </body>
</html>

Script

function iniciar(){
  var texto = document.getElementById("text").value;
  var palabras = texto.split(/[, ]+/);
  var index = 0;
  console.log(palabras);

  function tester(){
    document.getElementById("txt").innerHTML=palabras[index];    
    var timer = setTimeout(function(){
      console.log(timer);
      tester();
    },550);

    console.log(palabras[index]);

    if (index>palabras.length-2){
        clearTimeout(timer);
    }
    index++;
  }
  tester();
}
Loïc
  • 11,804
  • 1
  • 31
  • 49
Aurea Argaiz
  • 61
  • 2
  • 7
  • I'd strongly advise you to learn to indent and structure your code. – Loïc Nov 18 '19 at 01:12
  • Can you tell me where, please? Maybe I don't notice – Aurea Argaiz Nov 18 '19 at 01:16
  • Also I tried to format your code, but you create a function inside another and call the inside one... your coding style is really weird. Again, please, structure your code. – Loïc Nov 18 '19 at 01:16
  • everywhere, I don't understand most of your code. Like tester calling itself with a timeout, why ? The function inside another, why ? – Loïc Nov 18 '19 at 01:22
  • Im kind of new o this as you can see :/ . So I put one function inside another because I just want the other functions to be executed as soon as it has been clicked, I guess there is a better way to do it. – Aurea Argaiz Nov 18 '19 at 01:33
  • let's try something. First create a function that takes a word, and returns an html with : ```word``` For that you can use substring and word.length / 2 – Loïc Nov 18 '19 at 01:49
  • I don't think this can be done using a textarea. Use a div with contenteditable, check this link https://stackoverflow.com/questions/37139076/change-color-of-specific-words-in-textarea/37160584 – SK - Nov 18 '19 at 02:32

1 Answers1

1

Here is updated Javascript code, returning each word in the array with the middle letter in red color.

function iniciar(){
    var texto = document.getElementById("text").value;
    var updatedtexto = texto;
    var palabras = texto.split(/[, ]+/);
    console.log(palabras);
    palabras.forEach(function(value, index){
        var wordstr = value;
        var wordLength = value.length; //get length of word
        var centerOfWord = (wordLength/2).toFixed(0); //get centerofword
        var middleLetter = wordstr.substring(parseInt(centerOfWord) - 1, parseInt(centerOfWord)); //get middle letter of word
        var colorWord = wordstr.replace(middleLetter,  "<span style='color:red'>"+ middleLetter +"</span>"); //make middle letter color red
        setTimeout(function(){  //remove complete setTimeout if you want show full string with colored letters
            console.log(colorWord);
            document.getElementById("txt").innerHTML= colorWord; //show word
        }, 550*index);

        //updatedtexto = updatedtexto.replace(wordstr,  colorWord);  //uncomment if you want show full string with colored letters
    });

    //document.getElementById("txt").innerHTML= updatedtexto; //uncomment if you want show full string with colored letters
}

Hope this will work for you.

sssurii
  • 750
  • 4
  • 17