javascript - 每个输入字母在单独的行中返回

Question

如标题所示，我希望使用 while 循环将每个输入到输入字段中的字母显示在新的一行上。例如，如果有人在输入框中输入“cat”，将返回:

c

一个

这是我目前所拥有的，但目前它只显示第一个字母。

 var input = document.getElementById('userinput').value;
  var i  = input.length;
  while (i--) {
    document.getElementById('message').innerHTML = (input[i]);
  }

Answer 1

行:

document.getElementById('message').innerHTML = (input[i]);

正在完全覆盖 #message 的 HTML元素，所以它只会有最后一次迭代的值。相反，你会想要做的:

document.getElementById('message').innerHTML += (input[i]) + "<br />";

随着 <br />移动到一个新的行。要以自上而下的方式使用它，您可能需要使用普通的 for 循环:

for(var i = 0; i < input.length; i++)
    document.getElementById('message').innerHTML += input[i] + "<br />";

---

下面是一个基本的代码片段示例(按下回车键或取消聚焦将触发事件):

document.getElementById('text').addEventListener("change", function(){
  document.getElementById('message').innerHTML = "";
  input = document.getElementById('text').value;
  for(var i = 0; i < input.length; i++)
      document.getElementById('message').innerHTML += input[i] + "<br />";
});

<input id="text" type="text" />
<div id="message"></div>