javascript - 使用输入中的文本添加多种样式的 div

Question

我一直在尝试列出一份名单。名称通过 Enter click 输入。之后它应该填充一个数组，稍后将用于对它们进行洗牌。单击 Enter 键后，我尝试将每个数组子项添加到样式化的 div 中。

这就是我到目前为止所尝试的 -

var values = [];
document.getElementById("inputtext").onkeypress = function(event){
  if (event.keyCode == 13 || event.which == 13){
    var inp = document.getElementById('inputtext');
    values.push(inp.value);
    inp.value = "";
    for(var i = 0; i < values.length; i += 1) {
      var udiv = document.createElement("div");
      udiv.className = "idiv";
      udiv.innerHTML = document.getElementById("inputtext").value;
      document.getElementsByClassName('addednames')[0].appendChild(udiv);
    }
  }
}

我不确定这是否是正确的方式希望获得更多指导。提前致谢

Answer 1

使用inp.value = ""，您正在重新设置输入的值，但您正在尝试访问循环内的值。相反，您可以使用数组值来创建元素:

var values = [];
document.getElementById("inputtext").onkeypress = function(event){
  if (event.keyCode == 13 || event.which == 13){
    document.getElementsByClassName('addednames')[0].innerHTML = ''; //Clear the previously created div
    var inp = document.getElementById('inputtext');
    values.push(inp.value);
    inp.value = ""; 
    values.sort(() => Math.random() - 0.5); //shuffle the array
    for(var i = 0; i < values.length; i += 1) {
      var udiv = document.createElement("div");
      udiv.className = "idiv";
      udiv.innerHTML = values[i];
      document.getElementsByClassName('addednames')[0].appendChild(udiv);
    }
  }
}

.idiv{
  border: 1px solid lightgray;
  margin: 3px 0;
  padding: 5px;
}

<input id="inputtext"/>
<div class="addednames"></div>