How to append the string to textarea using javascript

Question

I want to append the given string to the textarea i have, i want to append the text in the way it should look like someone typing on the texture,because i have the voice playing in the background for 6 seconds which which says the same thing to be written.

<textarea id='typeable' style='font-size:18px;background:#F8E71C'></textarea>    

<script>
    function addText(event) {
        document.getElementById("typeable").value += "Hello welcome to the new world of javascript"
    }
    </script>

how can i do this

You have your answer right there? Only change the "alltext" to id of textarea "typeable" — M.P.
– M.P., Commented Jul 6, 2016 at 10:45
I think the OP wants the text to be "written" to the textarea character to character, like a human would. — Esko
– Esko, Commented Jul 6, 2016 at 10:46
Make a sequence when you wait time before each text adding ? — Furtiro
– Furtiro, Commented Jul 6, 2016 at 10:49

Sahil · Accepted Answer · 2016-07-06 11:00:40Z

3

Count the number of characters in the sentence, and then calculate the time for each char by dividing the total time with the no. of characters and then call the time Interval and run it until all the characters are printed.

Still you can decide the time taken to print each character and modify it as per your need. Please note that the time is taken in milliseconds.

var chars = "Hello welcome to the new world of javascript".split("");
var textarea = document.querySelector('textarea');
var total_time=6000;
var index = 0;
var time_per_char = total_time/chars.length;
var t = setInterval(function(){
 textarea.value += chars[index];
  index++;
  if (index === chars.length){
   clearInterval(t);
  }
},time_per_char);

<textarea style="width:100%;background:#E1ECF4">

</textarea>

edited Jul 6, 2016 at 11:00

answered Jul 6, 2016 at 10:51

Sahil

3,3381 gold badge23 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ceejay Over a year ago

At the end its saying undefined undefined. how to remove that undefined

Sahil Over a year ago

It does not print undefined. The timer is cleared once all the characters are printed.

Suneet Bansal · Accepted Answer · 2016-07-06 10:49:17Z

0

Code is attached below:

<!DOCTYPE html>
<html>

<script>
function appendText() {
 document.getElementById("typeable").value= document.getElementById("typeable").value + "Hello welcome to the new world of javascript";
}

</script>
<body onload="appendText()">
<textarea id='typeable' style='font-size:18px;background:#F8E71C'></textarea>    
</body>
</html>

answered Jul 6, 2016 at 10:49

Suneet Bansal

2,7061 gold badge16 silver badges18 bronze badges

1 Comment

Andreas Over a year ago

This is not what the OP asks for: "it should look like someone typing"

Collectives™ on Stack Overflow

How to append the string to textarea using javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related