добавить несколько стилей div с текстом из ввода

Question

Я пытался составить список имен. имена вводятся нажатием 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>

Answer 2

Есть несколько незначительных проблем с вашим кодом:

- Цикл for. Что бы он делал, каждый раз, когда вы вводите новый вход, вы добавляете все предыдущие входы, добавленные в div.

-Использование className для доступа к элементу. Почему бы вам просто не использовать идентификатор вместо этого? Это устранит потенциальные проблемы в будущем, если вы решите добавить больше элементов с тем же классом.

-Использование ключевого слова var. Попробуйте вместо этого использовать let. Вот хороший пост о причине: В чем разница между использованием "let" и "var"?

Кроме того, все это хорошо.