'this' Keyword not working not working in Atom

Question

When I type the following code in Atom the this keyword is not seen as a keyword but rather just a regular word.

However, if I use the chrome dev tools it is shown as a keyword. I don't think it's a syntax error

Would anyone have an idea on what to do about it and if not which other text editor could I use.

var numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (var i = 0; i < numberOfDrumButtons; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function() {
    console.log(this.style.white);
  })
}

Answer 1

It's working fine, there is no such style as "white" "White" is a value, not a property. Try console.log(this.style)

PS

numberOfDrumButtons should contain the list of elements, not length, so you can avoid querying multiple times.

 var numberOfDrumButtons = document.querySelectorAll(".drum"); for (var i = 0; i < numberOfDrumButtons.length; i++) { numberOfDrumButtons[i].addEventListener("click", function() { console.log(this.style.color); }) }

 <div class="drum" style="color: red">drum</div> <div class="drum" style="color: green">drum</div> <div class="drum" style="color: blue">drum</div> <div class="drum">drum</div>

Answer 2

There are several reasons why the coloring might differ from your expectations:

Grammar Package

There are several syntax grammars for JavaScript. Besides the built-in language-javascript , there's the popular third-party package language-babel which is more specific than the former and supports ESNext, JSX, GraphQL and several frameworks such as React or Etch.

Top: language-javascript
Bottom: language-babel

Parser

Around 2018, Atom introduced an alternative to the default parser it borrowed from TextMate: tree-sitter . Switching between these usually results in a differently looking syntax:

Top: TextMate parser
Bottom: Tree-sitter parser

While you might find the result of the old TextMate parser more pleasing and/or functional, it should be noted that Tree-sitter is significantly faster! It's probably best to find a combination of tree-sitter and syntax grammar that suits you.

You can toggle the used parser in the core settings.

Grammar / Theme combination

Lastly, the coloring of the syntax is always determined by two factors:

1. the syntax grammar defines the rules for a language and categorizes them into "scopes"

2. the syntax theme applies colors to these scopes

Not every syntax theme supports all rules provided by the grammar. A grammar might also be more specific than the syntax theme.

In short: different themes will color the same language differently.