Uncaught ReferenceError: li is not defined

byMR

July 21, 2022

This is to do list project, but I don’t know why this isn’t working.

Can anyone help me? I have checked this several times, and all files are good. Also, CSS code is not mine, it’s copied.

Of course, this project is not finished, but I’m testing this now (I’m beginner).

I got this error when I click on span:

script.js:4 Uncaught ReferenceError: li is not defined
    at newTask (script.js:4:2)
    at HTMLSpanElement.onclick (index.html:14:46)

function newTask() {
    let task = document.createElement('li');
    let inputText = document.querySelector('#inputText').value;
    li.appendChild(inputText)
}

body {
  margin: 0;
  min-width: 250px;
}

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ul li:nth-child(odd) {
  background: #f9f9f9;
}

ul li:hover {
  background: #ddd;
}

ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

.header {
  background-color: blue;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> To Do List </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="task-manager" class="header">
        <h2 style="margin:5px"> Lista zadataka </h2>
        <input type="text" id="inputText" placeholder=" Naziv zadatka ">
        <span onclick="newTask()" class="addBtn">Dodaj</span>
    </div>

    <ul id="list">

    </ul>

        <script src="script.js"></script>
</body>
</html>

>Solution :

First, you need to get the ul element which has list id, also you need to set the value of the li element after create it with input value.

Also, If wanted to reset the input value after adding the task

const input = document.querySelector('#inputText')
function newTask() {
    let task = document.createElement('li');
    
    let inputText = input.value;
    task.textContent = inputText;
    input.value = ''
    const list = document.getElementById('list');
    list.appendChild(task)
}

body {
  margin: 0;
  min-width: 250px;
}

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ul li:nth-child(odd) {
  background: #f9f9f9;
}

ul li:hover {
  background: #ddd;
}

ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

.header {
  background-color: blue;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> To Do List </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="task-manager" class="header">
        <h2 style="margin:5px"> Lista zadataka </h2>
        <input type="text" id="inputText" placeholder=" Naziv zadatka ">
        <span onclick="newTask()" class="addBtn">Dodaj</span>
    </div>

    <ul id="list">

    </ul>

        <script src="script.js"></script>
</body>
</html>