不能显示数组输出

Can't display array output

本文关键字：输出 数组 显示 不能      更新时间：2023-09-26
<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>

相关文章：