使用输入中的文本添加多重样式的 div答案

【问题标题】：add multiply styled divs with text from input使用输入中的文本添加多重样式的 div
【发布时间】：2020-02-10 01:45:33
【问题描述】：

我一直在尝试列出姓名。名称是通过 enter click 输入的。之后它应该填充一个数组，该数组稍后将用于对它们进行洗牌。当点击输入时，我试图将每个数组子元素添加到样式化的 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);
    }
  }
}

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

【问题讨论】：

标签： javascript loops dom append push

【解决方案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>

【讨论】：

【解决方案2】：

您的代码存在一些小问题：

-for 循环。它会做的是每次你输入一个新的输入，你会得到所有以前的输入附加到 div。

-使用类名访问元素。为什么不直接使用身份证呢？如果您决定在同一个类中添加更多元素，这将消除未来的潜在问题。

- 使用 var 关键字。尝试使用 let 代替。这是一篇关于原因的好帖子：What's the difference between using "let" and "var"?

除此之外，一切都很好。

【讨论】：