Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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,837 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

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,837 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

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,837 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