CODEWITHSUNDEEP
javascript
Ceejay
Ceejay

Reputation: 7277

How to append the string to textarea using javascript

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

Upvotes: 1

Views: 1130

Answers (2)

Sahil
Sahil

Reputation: 3358

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>

Upvotes: 3

Suneet Bansal
Suneet Bansal

Reputation: 2702

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>

Upvotes: 0

Related Questions