如何解决输入不退回的问题

Question

由于某些原因，当输入输入时，它会反向返回。 我可以使用for循环使其工作，但是如何使用while循环来实现呢？

 var input = document.getElementById('userinput').value;
 var i  = input.length;
 while (i--) {

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

  }

Answer 1

反转循环计数器和条件：

var input = document.getElementById('userinput').value;
var i = 0;
while (i < input.length) {
  document.getElementById('message').innerHTML += input[i] + "<br/>";
}

或反转循环内的串联顺序：

var input = document.getElementById('userinput').value;
var i  = input.length;
while (i--) {
  document.getElementById('message').innerHTML =
          input[i] + "<br/>" + document.getElementById('message').innerHTML;
}

请注意，无论哪种方式都不应该在循环中更新.innerHTML ：作为一般原则，请尽量减少DOM更新，因此请使用临时变量来构建所需的字符串，然后在循环后分配一次.innerHTML 。 或对于您在这里实际执行的操作，不需要循环：

var input = document.getElementById('userinput').value;
document.getElementById('message').innerHTML = input.split("").join("<br>");

Answer 2

实现目标的最简单方法：

var input = document.getElementById('userinput').value;
document.getElementById('message').innerHTML += input.split('').join('<br/>')

Answer 3

这是使用split和forEach的另一种方法

var input = document.querySelector("#userinput").value;
var html = "";

input.split("").forEach(function(char){

  html += char + "<br>";

});

document.querySelector("#message").innerHTML = html;