display user input to list using javascript

Question

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);
}

Mamun · Accepted Answer · 2021-05-21 02:58:38Z

2

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>

answered May 21, 2021 at 2:58

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ericstlouis Over a year ago

thanks for help...so its bests to set variables inside the function your using??

BTSM · Accepted Answer · 2021-05-21 02:58:27Z

1

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>

answered May 21, 2021 at 2:58

BTSM

1,6638 gold badges14 silver badges29 bronze badges

2 Comments

ericstlouis Over a year ago

thank you so much....so my first const inputTask variables didnt go into the newTask function?

BTSM Over a year ago

Well the variable inputTask will initialized as empty string when the page is loading. And it is never updated. So you should get the value in newTask() function.

Mohd Arshad · Accepted Answer · 2021-05-21 12:23:19Z

1

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);
}

answered May 21, 2021 at 12:23

Mohd Arshad

473 bronze badges

Collectives™ on Stack Overflow

display user input to list using javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related