CODEWITHSUNDEEP
javascripthtmllist
ericstlouis
ericstlouis

Reputation: 43

display user input to list using javascript

I'm trying to create a to-do list app but i cant seems to append the user data to my list

html:

 <div id="Html">
         <input id="input-task" placeholder="New Task" >
              <button id="add-btn" type="button" onclick="newTask()">
                    Add Tasks
              </button>
     </div>
    <div>    
    <ul id="task-table">
        <li>Task 1</li>
    </ul>
    </div>

separate javascript file:

 const inputTask = document.getElementById('input-task').value;

   
    var li = document.createElement('li');
        var t = document.createTextNode('inputTask');
        li.appendChild(t);
        document.getElementById('task-table').appendChild(li);
}

Upvotes: 0

Views: 1469

Answers (3)

Mohd Arshad
Mohd Arshad

Reputation: 47

Nothing wrong in your code! Simple fixed this line

var t = document.createTextNode('inputTask');

Remove ('' quotes)

var t = document.createTextNode(inputTask);

And Final thing I don't know may be you have already done this but I want to mention this Wrap this code inside the newTask() function Example: -

function newTask(){
  const inputTask = document.getElementById('input-task').value;   
  var li = document.createElement('li');
  var t = document.createTextNode(inputTask);
  li.appendChild(t);
  document.getElementById('task-table').appendChild(li);
}

Upvotes: 1

Mamun
Mamun

Reputation: 68933

inputTask is variable containing the text value but you using that as if it is string, remove the quotes around it.

I will also suggest you to avoid inline event handler, you can use addEventListener() instead like the following way:

document.getElementById('add-btn').addEventListener('click', newTask);

function newTask(){
  const inputTask = document.getElementById('input-task').value;

  var li = document.createElement('li');
  var t = document.createTextNode(inputTask); //remove quotes here
  li.appendChild(t);
  document.getElementById('task-table').appendChild(li);
}
<div id="Html">
  <input id="input-task" placeholder="New Task" >
  <button id="add-btn" type="button">
    Add Tasks
  </button>
</div>
<div>    
  <ul id="task-table">
    <li>Task 1</li>
  </ul>
</div>

Upvotes: 2

BTSM
BTSM

Reputation: 1663

Try like this. You should call newTask function and append child in it.

const inputTask = document.getElementById('input-task').value;

function newTask(){
    var li = document.createElement('li');
    var t = document.createTextNode(document.getElementById('input-task').value);
    li.appendChild(t);
    document.getElementById('task-table').appendChild(li);
    document.getElementById('input-task').value="";
}
<div id="Html">
     <input id="input-task" placeholder="New Task" >
          <button id="add-btn" type="button" onclick="newTask()">
                Add Tasks
          </button>
 </div>
<div>    
<ul id="task-table">
    <li>Task 1</li>
</ul>
</div>

Upvotes: 1

Related Questions