Quiero agregar li al elemento ul con el valor ingresado por el usuario en el área de entrada. Este es el error que estoy recibiendo en la consola:
[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>JS:-
function additem() { var task = document.getElementsByClassName("form-control")[0].value; var li = document.createElement("li"); li.classList.add("list-group-item"); li.innerText = task; document.getElementsByClassName("list-group")[0].appendChild(li); } document.getElementById("button").addEventListener("click",additem);.appendChild("li") , le daremos un elemento y no una cadena, ya que toma el elemento y no una cadenagetElementsByClassName() devuelve una matriz, por lo que tomaremos el elemento en el índice 0 de la matriz en ambas funciones donde está allíli = "task" como esta, tendremos que configurar su texto por li.innerText = task