How to create a self-updating list in html?

1.6k Views Asked by PurpleDoge At 11 May 2018 at 00:25

I'm new in html and i'm still trying to figure this thing:

I want to create a list which autoupdates when I add new items in a textbox, for example:

I want to add "Brother", then it lists "- Brother", when i decide to add more items, like "Sister" it would be "- Sister" in a new line, but if I decide to add the same thing again i want to be doubled without adding a new line, for example if i would add "Brother" again, it must show "2x Brother" instead of "Brother" in two lines, is it possible to do in html?

Thanks in advance

Original Q&A

There are 2 best solutions below

zerpsed On 11 May 2018 at 00:33

To answer your question:

is it possible to do in html?

I think no, it is not possible in pure html.

You will need to use Javascript. You could listen for the change event on your textbox (input or textarea) and when there is a change, use Javascript to read the words in your textbox, add them to a Javascript array, sort the array to check for duplicates or check each element of the array against all others to check for duplicates and store duplicates along with their count in another array.

There are many other ways to accomplish your goal using Javascript.

lifeparticle On 11 May 2018 at 02:21

Use simple javascript to insert list items

<!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>

How to create a self-updating list in html?

There are 2 best solutions below

Related Questions in HTML

Related Questions in LIST

Related Questions in SELF-UPDATING

Trending Questions

Popular # Hahtags

Popular Questions