'I want to make a todo list but I am stuck at the start, where am I going wrong in this code?

I want to add li to the ul element with the value entered by user in the input area. This is the error I am getting in console:

[Error] TypeError: document.getElementsByClassName("list-group").appendChild is not a function. (In 'document.getElementsByClassName("list-group").appendChild("li")', 'document.getElementsByClassName("list-group").appendChild' is undefined)
    additem (script.js:7)

//this is my javascript code-->

    function additem() {
    var task = document.getElementsByClassName("input-group-text").value;
    
    var li = document.createElement("li");
    li.classList.add("list-group-item");
    li = "task";
    document.getElementsByClassName("list-group").appendChild("li");
    }
    document.getElementById("button").addEventListener("click",additem);

 //<--!this is my html code-->

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LearnCodeOnline</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    </head>
    <body class="bg-dark">
    <div class="container bg-warning p-4">
      <h1 class="text-center">LearnCodeOnline</h1>
      <div class="input-group">
        <span class="input-group-text">todo</span>
        <textarea class="form-control" aria-label="With textarea"></textarea>
      </div>
      
      <button id="button" class="float-right">Add</button>
      
        <ul class="list-group">
          <li class="list-group-item">An item</li>
        </ul>
      
      <!-- <button
        type="button"
        class="btn btn-success btn-lg mt-4 mx-auto d-block sort-btn"
      >
        Sort courses
      </button> -->
       </div>

    </body>
    </html>

javascript button

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'I want to make a todo list but I am stuck at the start, where am I going wrong in this code?

Sources

Related Questions