如何解決輸入不退回的問題

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;