Javascript Typewriter Effect using Array

2019-07-31 19:14发布

站内问答 / JavaScript
1791 3 4

I am trying to make a typewriter effect in javascript using array. At first I hardcoded a string in the array and the effect worked properly. Later, i tried doing the same thing with user input but it would not work.

This is the hardcoded version:

<html>
<head>
<script type="text/javascript">
var arr=new Array()
var start=0;
var end=start + 1;
arr[0]="Hello";
function write()
{
    setTimeout(function() {
        document.body.innerHTML=document.body.innerHTML + arr[0].slice(start,end);
        start++;
        end=start + 1;
        if (start < 5) {
            write();
        }
    }, 500);
}
onload=write();
</script>
</head>
<body>
</body>
</html>

This is the version in which I'm trying to get user input:

<html>
<head>
<script type="text/javascript">
var arr=new Array()
var start=0;
var end=start + 1;
arr[0]=document.getElementById('word').innerHTML;
function write()
{
    setTimeout(function() {
        document.body.innerHTML=document.body.innerHTML + arr[0].slice(start,end);
        start++;
        end=start + 1;
        if (start < 5) {
            write();
        }
    }, 500);
}
</script>
</head>
<body>
<input type="text" value="Hello World" id="word">
<br>
<a href="javascript:write()">Click</a>
</body>
</html>

Please tell me what changes i should make in my coding so that the version with user input works properly.

3条回答
Bombasti
2楼-- · 2019-07-31 20:03

Use the value property instead of innerHTML:

arr[0]=document.getElementById('word').value;

And put that inside the write function, so that you get the value when the link is clicked instead of before the element even exists.

查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
3楼-- · 2019-07-31 20:06 
<html>
<head>
<script type="text/javascript">
var arr=new Array()
var start=0;
var end=start + 1;
arr[0]="Hello";
function write()
{
    setTimeout(function() {
        //document.body.innerHTML=document.body.innerHTML + arr[0].slice(start,end);
        document.getElementById("word").value=document.getElementById("word").value + arr[0].slice(start,end);
        start++;
        end=start + 1;
        if (start < 5) {
            write();
        }
    }, 500);
}
onload=write();
</script>
</head>
<body>
<input type="text" value="" id="word">
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
4楼-- · 2019-07-31 20:07

In short: Usually - To get the current value of input (including select, textarea, radio, etc.) get it from attribute value, innerHTML from others.

No need to use an array :) You can write a lot less with the same effect.

// `str` is the string to write to on `target` element.
function write(str, target){


  var attr = ~"input,textarea".indexOf( target.tagName.toLowerCase() )? 'value' : 'innerHTML',
  //attr - element attribute which contains its value/html
  //if it isn't a input or textarea `attr` should be innerHTML;

  start=0,
  interval = setInterval(function() {
        target[attr] += str.substr(start++,1); //get one character starting from `start` 
        if( start >= str){
            clearInterval( interval );
        }
    }, 500);
  target[attr]  = ''; //clear the current text on target element.
};
write('hello', document.getElementById('word') ); 
//  write('hello', document.body );
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)