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

Posted by Karson Kalt
Karson Kalt
10,935 Points

= vs == operator

I am having trouble understanding why at the beginning of the function we use the strict "===" 

toggleList.addEventListener ('click', () => {
  if ( listDiv.style.display === 'none' ) {

Why does this change later in the function when we use only one = operator

  else {
    toggleList.textContent = 'Show List';
    listDiv.style.display = 'none';
    }

Both are referencing list.div.style.display

Andrew Phythian
Andrew Phythian
19,747 Points

A single '=' is used when setting the value of a property or variable.

A '==' or '===' is used as a comparison operator, checking whether a variable or property is equal. In the case of the '===' the test includes a type of value as opposed to a straight comparison of value.

https://www.w3schools.com/js/js_comparisons.asp

1 Answer

Ollie White
Ollie White
6,537 Points
Ollie White
Ollie White
6,537 Points

Hi Karson, In JavaScript we use the single = as an assignment operator to assign variables as seen in the second part of your code where you are assigning "toggleList.textContent" the value "Show List".

On the other hand, === is a comparison operator which is used when comparing values as seen in the first part of your code as you compare the contents of "listDiv.style.display" to the value 'none'.

In short we use comparison operators like === to compare values or variable contents and assignment operators like = to declare or change the content of a variable.

I hope this helps, Ollie.

Karson Kalt
Karson Kalt
10,935 Points

Thank you so much!