JS文字打字机效果

最近开始学习了JavaScript，做了一个练习，要求实现的效果是：创建两个文本框和一个按钮，在第一个文本框里打完字，点击按钮，第一个框里的文字会倒序出现在第二个文本框里，而且是一个一个地出现，就像打字机的效果一样。
效果图：

效果图比较简陋，因为我没有添加CSS样式。
以下是我的代码：

代码虽然不多，只有短短十几行，但是对于我这种小白来说，这次练习让我学到了很多书上没有的东西。
1.我想让文本框2里的内容把文本框1里的内容以倒序的形式显示出来。文本框1的内容可以用area1.value来表示。
首先用了split（）方法把area1.value这个字符串转换成数组，split（“”）表示每个字符之间都会被分割；reverse() 方法用于颠倒数组中元素的顺序；最后再用join（）方法将数组转换成字符串。
2.要实现打字机效果，我用了setInterval函数，函数里用了substring()方法。以下是W3Cschool的解释

先在外部声明var i=0；
substring（0，i++）意味着从str[0]开始作为起点，我时间参数设定的是200毫秒，i++意味着每过200毫秒i就加1，这样就可以实现打字机效果了。
以上就是我对于这次练习的总结和心得，如果其中什么说的不正确的地方还请各位指正。如果哪位大神有更好的方法也欢迎交流，谢谢！
我把原码也贴出来：
function input(){
var area1=document.getElementById(“area1”);
var area2=document.getElementById(“area2”);
var btn=document.getElementById(“btn”);
btn.onclick=function(){
var i=0;
setInterval(function(){
var str=area1.value.split(”).reverse().join(”);
area2.value=str.substring(0,i++);
},200);
}
}
input();