자바 스크립트 타자기 배열을 사용하여 효과

배열을 사용하여 javascript에서 타자기 효과를 만들려고합니다. 처음에는 배열에 문자열을 하드 코딩했는데 효과가 제대로 작동했습니다. 나중에 사용자 입력으로 동일한 작업을 시도했지만 작동하지 않습니다.자바 스크립트 타자기 배열을 사용하여 효과

이것은 하드 버전 :

<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>

이 내가 사용자의 입력을 얻으려고하는 버전은 다음과 같습니다

<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>

내가해야 변경되는지 알려주세요 사용자 입력이있는 버전이 제대로 작동하도록 코딩해야합니다.

출처

2012-08-12 Samarth Wahal

내가 그것을 사랑하고, 나는 이런 식으로 뭔가를 찾고 있었다 생각도 고맙습니다 다음'쓰기()'기능에 대한 정보를 포함한 D – themis

대신 innerHTML의 value 재산 사용

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

을 넣어 그 write 함수 내에서, 당신은 링크 대신 요소도 존재하기 전에의 클릭 값을 얻을 수 있도록. 한마디로

출처

2012-08-12 07:55:14 Guffa

+1. – Blender

고마워요! 그건 내 바보 같았 어. –

<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>

출처

2012-08-12 08:12:05 themis

: 보통 - (등을 선택, 텍스트 영역, 라디오 등 포함) 입력의 현재 가치를 속성 값, 다른 사람들의 innerHTML을에서 그것을 얻을합니다.

배열을 사용할 필요가 없습니다. 동일한 효과로 훨씬 적은 양을 쓸 수 있습니다.

// `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);

출처

2012-08-12 10:10:41 abuduba

아니요, HTML 속성에서 가져 오지 않으면 DOM * 속성에서 가져옵니다. * 'value' – Bergi

자바 스크립트 타자기 배열을 사용하여 효과

답변

관련 문제