CODEWITHSUNDEEP
javascripthtml
user15987286
user15987286

Reputation:

Can't get the input value to display in the HTML

Extremely new to Javascript and trying to create a basic todo list using an array. I feel like I'm on the right track because my add button is creating a new li onclick, but its not displaying the value of the input field. I've played around with several different things, but it seems like I've hit a wall. I'm not sure where to go from here.

let addButton = document.getElementById('add-button');
addButton.addEventListener('click', add);

let addInput = document.getElementById('add-input');

let removeButton = document.getElementById('remove-button');
removeButton.addEventListener('click', remove);

let todo = []

function add() {
  let todoInput = addInput.value;
  todo.push(todoInput);
  displayTodo();
}

function remove() {}

function displayTodo() {
  let todosUl = document.getElementById('todos-ul');
  todosUl.innerHTML = '';

  for (let i = 0; i < todo.length; i++) {
    let todoLi = document.createElement('li');
    todosUl.appendChild(todoLi);
  }
}
<input id="add-input">
<button id="add-button">Add</button>
<button id="remove-button">Remove</button>

<ul id="todos-ul"></ul>

Upvotes: 1

Views: 192

Answers (4)

Mohd Arshad
Mohd Arshad

Reputation: 47

Oh Dear, Nothing wrong in your code! you just miss one line of code 

todoLi.innerHTML = todo[i];

this is new displayTodo function copy and paste this and check it will work

function displayTodo() {
  let todosUl = document.getElementById('todos-ul');
  todosUl.innerHTML = '';
  for (let i = 0; i < todo.length; i++) {
    let todoLi = document.createElement('li');
    todoLi.innerHTML = todo[i];
    todosUl.appendChild(todoLi);
  }
}

previously your code is appending only li tag inside the ul but not adding any text inside that now this problem is solved

Upvotes: 1

Ali Ehyaie
Ali Ehyaie

Reputation: 1260

You should add todo[] in todoLi with innerHTML 

let addButton = document.getElementById('add-button');
addButton.addEventListener('click', add);

let addInput = document.getElementById('add-input');

let removeButton = document.getElementById('remove-button');
removeButton.addEventListener('click', remove);

let todo = []

function add() {
    let todoInput = addInput.value;
    todo.push(todoInput);
    displayTodo();
}

function remove() {

}

function displayTodo() {
    let todosUl = document.getElementById('todos-ul');
    todosUl.innerHTML = '';

    for (let i = 0; i < todo.length; i++) {
        let todoLi = document.createElement('li');
        todoLi.innerHTML = todo[i];
        todosUl.appendChild(todoLi);
    }

}

Upvotes: 2

BTSM
BTSM

Reputation: 1663

You should insert text to list.

todoLi.innerHTML=todo[i];

let addButton = document.getElementById('add-button');
    addButton.addEventListener('click', add);

    let addInput = document.getElementById('add-input');

    let removeButton = document.getElementById('remove-button');
    removeButton.addEventListener('click', remove);

    let todo = [

    ]

    function add() {
      let todoInput = addInput.value;
      todo.push(todoInput);
      addInput.value = "";
      displayTodo();
    }

    function remove() {

    }

    function displayTodo() {
      let todosUl = document.getElementById('todos-ul');
      todosUl.innerHTML = '';

      for (let i = 0; i < todo.length; i++) {
          let todoLi = document.createElement('li');
          todoLi.innerHTML=todo[i];  //insert this code
          todosUl.appendChild(todoLi);
      }

    }
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link ref="stylesheet" href="style.css">
    <title>Todo List</title>
    </head>
    <body>
    <input type="text" id="add-input">
    <button id="add-button">Add</button>
    <button id="remove-button">Remove</button>
    <ul id="todos-ul">

    </ul>
    
    <script src=main.js></script>
    </body>
    </html>

Upvotes: 1

Knj
Knj

Reputation: 61

You're not displaying the data to your "li". You just simply created the element. Maybe you need to use "innerHTML" to the newly created "todoLi". E.g. (todoLi.innerHTML = todo[i]).

This is supposed to be a comment, but still can't comment bcoz of the reputation.

Upvotes: 1

Related Questions