**i want to know why i cant use li element in function.**
i.e. 
i have tried this command 
`li.classList.toggle("done")`
but it shows `Uncaught TypeError: Cannot read property 'toggle' of undefined"`

```js
var li = document.getElementsByTagName("li");
for(var i=0; i<li.length; i++)
{
 li[i].addEventListener("click", function()
 {
  li.classList.toggle("done");
 });
}
```

```css
.done {
  text-decoration: line-through;
}
```

```html
<!DOCTYPE html>
<html>
<head>
 <title>Javascript + DOM</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <h1>Shopping List</h1>
 <p id="first">Get it done today</p>
 <input id="userinput" type="text" placeholder="enter items">
 <button id="enter">Enter</button>
 <ul>
  <li class="bold red" random="23">Notebook</li>
  <li>Jello</li>
  <li>Spinach</li>
  <li>Rice</li>
  <li>Birthday Cake</li>
  <li>Candles</li>
 </ul>
 <script type="text/javascript" src="script.js"></script>
</body>
</html>
```