[英]Can't display array output
<script type="text/javascript">
function show(){
var word = document.getElementById("inp").value;
var letters = [];
for(i=0; i<=word.length; i++){
letters = word.substring(i,i+1);
}
document.getElementById("div").innerHTML = letters[0];
//setInterval();
}
</script>
</head>
<body>
<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>
</body>
“ letters [0]”的输出显示为未定义。 我想创建一个数组,假设输入为“ hello”,则输出为:
letters[0] = "h"
letters[1] = "e"
letters[2] = "l"
....
而且,我想向它添加一个setInterval()函数,以便它延迟显示一个字母一个字母。
谢谢!
使用push
方法在数组中添加元素
更换
letters = word.substring(i,i+1);
通过
letters.push(word.substring(i,i+1));
演示版
function show() { var word = document.getElementById("inp").value; var letters = []; for (i = 0; i < word.length; i++) { letters.push(word.substring(i, i + 1)); } var i = 0; var interval = setInterval(function() { document.getElementById("div").innerHTML = letters[i]; ++i === letters.length && clearInterval(interval); }, 250); }
<input type="text" id="inp" /> <button onclick="show()">Show</button> <br> <div id="div"></div>
要获取单个字母的数组,您还可以使用split
var div = document.getElementById("div"); // Cache function show() { var word = document.getElementById("inp").value; // Get latest value var letters = word.split(''), // Split every character and store in letters array i = 0; // Initialization to zero div.innerHTML = ''; // Clear previous text var interval = setInterval(function() { div.innerHTML += letters[i]; // Append a character ++i === letters.length && clearInterval(interval); // Clear interval after appending all the characters }, 100); // Call the function after every 100 milliseconds }
<input type="text" id="inp" /> <button onclick="show()">Show</button> <br> <div id="div"></div>
请勿在每次迭代中覆盖letters
的值。 使用push
附加到Array对象。
function show(){
var word = document.getElementById("inp").value;
var letters = [];
for(i=0; i<=word.length; i++){
letters.push(word.substring(i,i+1))
}
document.getElementById("div").innerHTML = letters[0];
//setInterval();
}
问题是您要覆盖letters
的值,而不是将其创建为数组
var interval, i; function show() { var word = document.getElementById("inp").value; var letters = word.split(''); clearInterval(interval); //clear the previos interval i = 0; //start from the first index interval = setInterval(function() { document.getElementById("div").innerHTML = letters[i]; i = ++i < word.length ? i : 0; //if the last char is shown start from beginning }, 500); }
<input type="text" id="inp" /> <button onclick="show()">Show</button> <br> <div id="div"></div>
代码唯一的问题是使用数组的push方法或使用索引来分配字母:
function show() { var word = document.getElementById("inp").value; var letters = []; for (i = 0; i <= word.length; i++) { letters[i] = word.substring(i, i + 1); } document.getElementById("div").innerHTML = letters[0]; } //setInterval();
<input type="text" id="inp" /> <button onclick="show()">Show</button> <br> <div id="div"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.