Q: Understanding onclick method in javascript Hi i am a beginner at javascript and i am trying to make a page showing a list of items and when i click on the item a line would cross it out. I dont understand the javascript code as i am not sure what gets passed into the function parameter'event'.


var ul = document.querySelector('ul');
var listall = document.querySelectorAll('li');
ul.onclick = function(event) {
  var target = event.target;
  target.classList.toggle("done");
}
.done {
  text-decoration: line-through;
}
<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>


javascript: im also not sure why is the variable assigned to 'ul' instead of 'listall'

A: Create a button inside your list element and add an onclick event
It can be in this format
<li><input type="button" value="done" onclick="lineThrough()">cherry</li>

which runs this program in your javascript
function parent()
{
    return event.srcElement.parentNode;
}

function lineThrough()
{
    parent().classList.toggle("done")
}


A: javascript: I'm also not sure why is the variable assigned to 'ul' instead of 'listall' - you can delete this line - var listall = document.querySelectorAll('li'); from your code and it will be working correctly because you choose ul - as it's the parent of li elements and if you want to select all li inside of ul you can do it also in this way - 
const userList = document.querySelectorAll('li');

for (user of userList) {
    user.addEventListener('click', function() {
        this.classList.toggle('done')
    });
}

