JS oop

let newTask = document.getElementById(‘new-task’)
let toDoList = document.getElementById(‘list’)
let item = document.getElementById(‘li’)

item.innerText = newTask.value

Im struggling learning OOP, i saw this project on youtube and tried following it but still dont understand.

So does this piece of code (item.innerText = newTask.value) just add a li element to the text you type in on the input text field bar.

Here is the link to the project https://www.youtube.com/watch?v=ClA3JiOueww&t=383s

Its the first six minutes i get stuck…

I checked the video. You have a typo defining item (author used createElement not getElementById.

For reference to everyone, here are the HTML and JS files:

HTML

<html>
  <body>
    <input id="new-task" type="text" />
      <button onclick="addToList()">add to list</button>
      <ul id="list">
      </ul>
  </body>
<script src="todo.js"></script>
</html>

JS

let list = [];
const addToList = () => {
  let newTask = document.getElementById(‘new-task’);
  let toDoList = document.getElementById(‘list’);
  let item = document.createElement(‘li’);

  //Add New Tast Text to Item
  item.innerText = newTask.value;

  //Add Item to List
  todoList.appendChild(item);
  list.push(newTask.value);

  //Reset The Text
  newTask.value = '';
}

To your question, I’m going to break it down in steps.

What you are trying to do:

  1. Get input from the user
  2. Use that input to create a new item in a list

What the code does:

  1. Create an input element in the HTML document <input id=“new-task” type=“text” /> to get text from the user
  2. Create an empty unordered list in the HTML document <ul id=“list”> where that input will be displayed
  3. In the JS file, get the value of the input from step 1 with document.getElementById(“new-task”); and store it in newTask
  4. Create a new list item with let item = document.createElement(‘li’);
  5. Give that new list item the value of newTask with item.innerText = newTask.value;

I hope this helps! If you are having issues with JavaScript and the DOM, Codecademy’s Web Developer Path chapter 6 Building Interactive JavaScript Websites would really help you :smiley:

Its okay now i figured it

1 Like

Wow! looks like I replied to you at the same time you figured it out haha. Did you read my mind?!

Yes i found another video which was very much the same thanks though, im going to look at the chapter 6 Building Interactive JavaScript Websites. Sounds good