无法显示阵列输出
[英]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>
The output of "letters[0]" is showing up as undefined. 
“ letters [0]”的输出显示为未定义。 I want to create an array, where, let's say if the input was "hello", then, output would be like: 我想创建一个数组，假设输入为“ hello”，则输出为：
letters[0] = "h"
letters[1] = "e"
letters[2] = "l"
....
And also, I would like to add a setInterval() function to it, so that it displays the letters, one by one, with a delay. 而且，我想向它添加一个setInterval（）函数，以便它延迟显示一个字母一个字母。
Thanks! 谢谢！
4 个解决方案
解决方案1
4 已采纳 2015-09-30 03:48:44
Use push method to add elements in the array 使用push方法在数组中添加元素
Replace 更换
letters = word.substring(i,i+1);
by 通过
letters.push(word.substring(i,i+1));
Demo 演示版
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>
To get the array of individual letters you can also use split 要获取单个字母的数组，您还可以使用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>
解决方案2
1 2015-09-30 03:48:54
Don't overwrite the value of letters in each iteration. 请勿在每次迭代中覆盖letters的值。 Append to the Array object using push . 使用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();
}
解决方案3
1 2015-09-30 03:50:51
The problem is you are overriding the value of letters instead of creating it as an array 问题是您要覆盖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>
解决方案4
1 2015-09-30 05:00:08
Only problem with the code is assign letters either using push method of array or using indexing: 代码唯一的问题是使用数组的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.