Как создать самообновляемый список в html?

Я новичок в HTML, и я все еще пытаюсь понять эту вещь:

Я хочу создать список, который автоматически обновляется при добавлении новых элементов в текстовое поле, например:

Я хочу добавить "Брат", затем в списке "- Брат", когда я решу добавить больше элементов, например "Сестра", это будет "- Сестра" в новой строке, но если я решу добавить то же самое снова Я хочу, чтобы меня удвоили, не добавляя новую строку, например, если бы я снова добавил "Брат", он должен показывать "2x Брат" вместо "Брат" в двух строках, это можно сделать в html?

заранее спасибо

Источник

2 ответа

Используйте простой JavaScript для вставки элементов списка

<!DOCTYPE html>
<html>
  <body>

    <input id="input1" type="text">
    <input type='button' value='add' onclick="addToTheList()" />

    <ul id="list">
    </ul>
    <script type="text/javascript">
      function addToTheList() {
        var u = document.getElementById("input1").value;
        document.getElementById("list").innerHTML += ("<li>" + u + "</li>");
      }

    </script>
  </body>
</html>

Источник

Чтобы ответить на ваш вопрос:

это можно сделать в HTML?

Я думаю, нет, это не возможно в чистом HTML.

Вам нужно будет использовать Javascript. Вы можете прослушать событие изменения в вашем текстовом поле (input или textarea) и, когда есть изменение, использовать Javascript, чтобы прочитать слова в вашем текстовом поле, добавить их в массив Javascript, отсортировать массив, чтобы проверить наличие дубликатов, или проверить каждый элемент. массива против всех остальных, чтобы проверить наличие дубликатов и сохранить дубликаты вместе с их количеством в другом массиве.

Есть много других способов достичь своей цели с помощью Javascript.

Источник
Другие вопросы по тегам