В JavaScript, как только пользователь отправит значение, как сохранить напечатанное значение?

Question

Я пытаюсь выполнить sh следующие задачи, показанные на картинке. Как вы можете видеть, есть 5 заявок, как я могу выполнить sh, чтобы все 5 работ были напечатаны на странице? Пока что я могу оставить только одну заявку, но как только я отправлю другую, она заменит ее. Это мой code.

var i = ",";
var listItem = " ";
var count = 0;

document.getElementById("sButton").addEventListener("click", processInput, false);

function processInput() {

    if (listItem = document.getElementById("inputText").value) {

        var inputValue = document.getElementById("inputText").value;
        document.getElementById("label").innerHTML = inputValue + ",";
    }

    else {
        (document.getElementById("label").innerHTML = " ");
    }

    if (count++ == 4) {            
        document.getElementById("message").innerHTML = "Gracias por sus 
                     sugerencias."
    }
}```

[Here, right below the textbox, it's showing 5 items/inputs that were submitted. How do I keep those and not lose them when another input is submitted?][1][1]: https://i.stack.imgur.com/4zRuT.png

Answer 1

Отслеживать значения в массиве отдельно от HTML. Когда элемент добавлен, поместите его в массив значений, а затем обновите отображаемый текст:

// the text input
const input = document.querySelector('input');

// an array to keep track of the values
const values = [];

// form submission handler that pushes the new value into the values array
function handleSubmit(e) {
  // prevent actual form submission
  e.stopPropagation();
  e.preventDefault();
  
  // append the new value
  if (input.value.trim().length) {
    values.push( input.value );
  }

  // reset the input
  input.value = '';
  
  // update the display
  updateDisplay(values);
}

// update the display from the given values
function updateDisplay (values) {
  // find the container for the display list
  const list = document.getElementById('list');

  // render the new text
  list.innerText = values.join(', ');
  
  const count = document.getElementById('count');
  count.innerText = values.length > 4
    ? 'Gracias por sus sugerencias.'
    : `You have ${values.length} values!`;
}

<div id="list">

</div>
<form onsubmit="handleSubmit(event)">
  <input />
  <button>Add a value</button>
</form>

<div id="count"></div>

Answer 2

Вам необходимо сохранить существующее значение путем объединения с предыдущим. Не записывайте его во внутреннюю HTML, а сопоставляйте с предыдущим значением. Пожалуйста, переопределите следующий фрагмент кода.

if (listItem = document.getElementById("inputText").value) {

  var inputValue = document.getElementById("inputText").value;
  document.getElementById("label").innerHTML += inputValue + ",";
} else {
  (document.getElementById("label").innerHTML = "");
}

if (count++ == 4) {

  document.getElementById("message").innerHTML = "Gracias por sus 
  sugerencias.
  "
}