Better way to do this

Hi All.

First off: Hope ya’ll having a great time! :sunny:

I’m practising JS with this To do list exercise from edX (DEV279x) and just out of curiosity, is there a better way to do this:

?

Just curious if there’s a shorter/better way to do this.

Hey Randell,

Thanks man. I did not yet had my share of the arrow functions just yet. Great to learn more about this.

I did check the Elements tab in Console after adding a newTodo but can’t see any empty Li added. Where am i suppose to see that? It does makes sense though because i’ve added the function in both the addTaskButton and inputField events without checking if addTaskButton ‘click’, () => false ?

Also do you have a MDN link for more info about:

Also, if you change the names of your html element ids to match your variable names, you can avoid using the getElementById part, because JS automatically creates variables with the same id name as long as they are valid syntax (no spaces just like valid variable name syntax).

I’ve checked this link below but no info about that. Would love to read more about that.

Hey Randell,

I’ve been at this for some time and keep getting this annoying bug.

I’ve added checkboxes after newListItems are added and wanted to add a “line-through” after checkbox is clicked. It’s just i keep seeing this aanoying bug:

“taskDone.addEventListener is not a function”

I have added a new id to the checkboxes and used arrow functions to call the taskDone() function using:

taskDone.addEventListener('click', () => taskDone());

checkbox.id             = "taskDone";

function taskDone() {
    checkbox.newListItem.style.textDecoration = "line-through"; // childNode.parentNode is this the right way for doing this ??
}

What am i doing wrong here?

Thanks @camperextraordinaire,

I’ve been at this for some time now and managed to get the strike-through work, but only for the first li item :persevere:

I’ve added a new pen here:

I think there must be an array which loops through checkbox[i], which corresponds to newListitem[i] ?? What’s the best way to do this?

what i’ve added so far is:

listItems.addEventListener("click", function(){
    checkClicked();
});

function checkClicked() {
    // get checkbox
    var checkBox = document.querySelector("input[type=checkbox]");
    // get listItem
    var listItem = document.querySelector(".newListItem");
    // if checkbox is checked line-through listItem
    if (checkBox.checked == true) {
        listItem.style.textDecoration = "line-through";
    }
    else {
        listItem.style.textDecoration = "none";
    }
}

Love to read your reply.

(checkBox.checked == true)

can be shortened to

(checkBox.checked)

If you like Ternary Operators,
you can change the whole section from

if (checkBox.checked == true) {
  listItem.style.textDecoration = 'line-through';
} else {
  listItem.style.textDecoration = 'none';
}

to

checkBox.checked
  ? (listItem.style.textDecoration = 'line-through')
  : (listItem.style.textDecoration = 'none');

Hey @miku86, tyvm for that shortened version. I’ve not yet had any exercises with Ternary Operators but looking forward to learn more.

I’ve also just checked your website and it looks great man. How did you get that toggle menu icon to dropdown with added space when you click on it. I hope it makes sense but what i mean is take a look at my landing page project here:

https://romson.github.io/MobiWallet---Product-landing-page/

When you click on that Hamburger icon in small screen view it does not add any space to the menu. How do i get that like on your website?

You are not taking advantage of what the addEventListener method returns when an element inside the ul element is clicked. Read over thedocumentation for addEventListener 1 and you will see you can specify an argument for the anonymous callback function to access the Event object. The event object has a lot of information in it such as the actual element targeted (which is what you need to know). I will give you an example of how to use the event object to access the element being targeted with an example using radio buttons. It will give you something to study and try to emulate in your own code.

So basically i connect the argument to the “class” and “type” and then loop through it with (checkBox[i].checked) => { argument[i].style.textDecoration = “line-through”; }

?

Found a way to get this working.

for (var i = 0; i < checkBox.length && i < listItem.length; i++) {
        if (checkBox[i].checked) {
            listItem[i].style.textDecoration = "line-through";
        }
        else {
            listItem[i].style.textDecoration = "none";
        }
    }

Would this be considered clean code to work around this?

@camperextraordinaire I am curious about the solution you suggested about specifying an argument for the anonymous callback function to access the Event object. Could you please share your solution with an example of how to get about that?

Wow nice code you got there Randell. Would be very proud of myself to write such beautiful lines of JS someday.