1

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

5
  • You have your answer right there? Only change the "alltext" to id of textarea "typeable" Commented Jul 6, 2016 at 10:45
  • @user3328306 "it should look like someone typing" Commented Jul 6, 2016 at 10:46
  • I think the OP wants the text to be "written" to the textarea character to character, like a human would. Commented Jul 6, 2016 at 10:46
  • Make a sequence when you wait time before each text adding ? Commented Jul 6, 2016 at 10:49
  • stackoverflow.com/search?q=%5Bjavascript%5D+typewriter Commented Jul 6, 2016 at 10:52

2 Answers 2

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>

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

2 Comments

At the end its saying undefined undefined. how to remove that undefined
It does not print undefined. The timer is cleared once all the characters are printed.
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>

1 Comment

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.