Question 52848 in Javascript Question posted in
A very good W3school tutorial can be found here.

Display Text through Javascript

I’m a beginner at using Javascript or just beginner in general. I’m having a little trouble with this function I created. It is supposed to create a list based on the previous function that I have created.

What I expect is the browser to create a new list every time a input is made with a set of values that were made.

const form = document.getElementById('todoForm')
const todoInput = document.getElementById('todoInput')

if (typeof document !== 'undefined') {
  let element = document.querySelector('.class-name')
}

let todos = []

form.addEventListener('submit', event => {
  event.preventDefault()

  saveTodo();
})

function saveTodo() {
  const todoValues = todoInput.value;

  let values = {
    value: todoValues,
    checked: false,
    color: '#' + Math.floor(Math.random() * 16777215).toString(16),
    length: todoValues.length
  }

  todos.push(values)
  addTask()
}

// add task and adds to the list
function addTask() {
  let task = document.createElement('li')
  task.appendChild(document.getElementById(todos))
}


console.log(todos)
<h1 class="title">ToDo List</h1>
<form action="#" class="todoForm" id="todoForm">
  <input type="text" placeholder="Text" id="todoInput" />
  <button id="btn-form" class="btn-form">Enter</button>
</form>
Tags:

2

Answers


  1. 0

    There are quite a few logical errors here.
    It sounds like you have a list of tasks and it is stored in todo variable.
    So when you are calling addTask() you want it either to receive the (1) new task as an argument or (2)use the todos variable.
    (1) in this case you need to create a <li> list element based on the new task, find <ul> element and then append the new one to <ul>
    (2) clear <ul> element, for each task in todos do (1).

    As a sidenote: let values = {.... should be better called ‘value’ as it represents a single task.

    Login or Signup to reply.
  2. 0

    This is probably what you need

    1. Added a <ul> element to your HTML so you can append there your list of task.
    2. let todoInput = document.getElementById('todoInput') moved this line inside your saveTodo() function becuz you have to get the value of your input right after you press the button, otherwise you will get an empty value
    3. have to make a loop to go thru each element pushed to your array then build your list, clear the ul everytime you insert a new element then build again
    //script.js
//Const, lets, and var
const form = document.getElementById('todoForm')


//This code only runs on browser
if (typeof document !== 'undefined') {
  let element = document.querySelector('.class-name')
}

//List

let todos = []
//Values


form.addEventListener('submit', event => {
  event.preventDefault()

  saveTodo();
})
//Save todo

function saveTodo() {
  let todoInput = document.getElementById('todoInput')
  const todoValues = todoInput.value;

  let values = {
    value: todoValues,
    checked: false,
    color: '#' + Math.floor(Math.random() * 16777215).toString(16),
    length: todoValues.length
  }

  todos.push(values)
  addTask()
}

//add task and adds to the list
function addTask() {
  let task = document.getElementById("list");
  task.innerHTML = "";
  for (let i = 0; i < todos.length; i++) {
    let li = document.createElement('li')
    li.innerHTML = todos[i].value;
    task.appendChild(li);
  }
}
    <!DOCTYPE html>
<html lang="en" id="html">
  <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" />
    <meta name="author" content="Nick" />
    <meta name="http-equiv" refresh="2" />
    <script type="module" src="./script.js" defer></script>
    <title>Todo List</title>
  </head>
  <body>
    <h1 class="title">ToDo List</h1>
    <form action="#" class="todoForm" id="todoForm">
      <input type="text" placeholder="Text" id="todoInput" />
      <button id="btn-form" class="btn-form">Enter</button>
    </form>
    <ul id="list"></ul>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search