Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Styling Elements

Sam Weeks
seal-mask
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points
Posted by Sam Weeks
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

something that's not quite been gone over in this course

iv've found that the JavaScript and theDOM's Course has'nt been very clear. one of the things im still a little confused about is the/// () => {} /// Part can any one explain this little bit of code Guil is using each time i think he says he's adding a function...... for example.....

toggleList.addEventListener('click', () => {

                            });

2 Answers

Cooper Runstein
Cooper Runstein
11,850 Points
Cooper Runstein
Cooper Runstein
11,850 Points

Those are arrow functions, they allow for shorter and more concise functions:

var func = function (a,b){
    return a * 2
}
//Does the same as:
var func = (a)=>{
    return a * 2
}
//Same as:
var func = a => a*2; //We can skip the brackets, and return, if the function is one line and has one input.

They're a newer and often better way to create functions, they're the future of functions in javascript.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

They get really great when you realize things like this are possible in so little code:

function myFunction(a, otherFunction){
    return otherFunction(a) + 1
}

myFunction(3, a => a*3) //returns 10
Sam Weeks
seal-mask
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points
Sam Weeks
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

bloody hell i didnt understand any of that. thanks for your time though mate i'll have another look into it later once ive had a few more lessons

Cooper Runstein
Cooper Runstein
11,850 Points
Cooper Runstein
Cooper Runstein
11,850 Points

Didn't mean to make anything more confusing, this course is a great place to start: https://teamtreehouse.com/library/getting-started-with-es2015-2

In a nutshell, "()=>{}" is just another way to create a function, everything between the brackets is just code that runs when that function is called.

Sam Weeks
seal-mask
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points
Sam Weeks
.a{fill-rule:evenodd;}techdegree
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

that makes sense :) thank you i'll take a look at that course!! if you have time below is code that ive followed from the lesson and it's not working when i try to add a list item in the console on chrome dev tools its sayingUncaught TypeError: Cannot read property 'addEventListener' of null at app.js:24 

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('input.addItemButton');


toggleList.addEventListener('click', () => {
  if(listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide List';
    listDiv.style.display = 'block';
} else {
  toggleList.textContent = 'Show list';
  listDiv.style.display = 'none';
}
});

descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':';
  descriptionInput.value = '';                                
                        });
addItemButton.addEventListener('click', () => { 
           let ul = document.getElementsByTagName('ul')[0];
           let li = document.creatElement('li');   
           li.textContent = addItemInput.value;
           ul.appendChild(li);
           addItemInput.value = '';
 });
Cooper Runstein
Cooper Runstein
11,850 Points
Cooper Runstein
Cooper Runstein
11,850 Points

Something is going on with the selector, and it isn't quite clear without seeing the html what that is, addItemButton has it's value set to null, because that's the output querySelector returns if it can't find an element that fits the parameters you gave it. My best guess based on the variable names you're using is you meant to do this:

const addItemButton = document.querySelector('button.addItemButton'); //using button instead of input as the tag