CODEWITHSUNDEEP
javascripthtmlcss
James
James

Reputation: 2787

Can't declare top in js

I am using following code to quickly assign window.getComputedStyle to a variable:

const {
  width,
  height,
  left
} = window.getComputedStyle(document.querySelector('canvas'));
console.log(width, left, height)
<canvas></canvas>

But when I want to declare top, it returns:

Uncaught SyntaxError: Identifier top has already been declared

const {
  width,
  height,
  left,
  top
} = window.getComputedStyle(document.querySelector('canvas'));
console.log(width, left, height)
<canvas></canvas>
But I haven't declared it before and it seems that it does work with left.

What am I missing?

Thanks.

Upvotes: 3

Views: 101

Answers (2)

Emil C.
Emil C.

Reputation: 101

if you open your browser's developer tools and type:

console.log(top)

You will see it's already declared to represent the top-most window.

Upvotes: 1

Cully
Cully

Reputation: 6965

top is a global variable in the browser. That means it's already defined in the context you're trying to define it in. You can name it something else:

const {
  width,
  height,
  left,
  top: topStyle, // this basically renames "top" to "topStyle"
} = window.getComputedStyle(document.querySelector('canvas'));

console.log(width, left, height, topStyle)

Or assign the computed style to a variable and access it there:

const canvasStyles = window.getComputedStyle(document.querySelector('canvas'));

console.log(
  canvasStyles.width,
  canvasStyles.left,
  canvasStyles.height,
  canvasStyles.top
);

Or just don't try to define the variable in the global scope. Instead define it in a function:

function accessPosition() {
  const {
    width,
    height,
    left,
    top
  } = window.getComputedStyle(document.querySelector('canvas'));

  console.log(width, left, height, top);
}

accessPosition();

Upvotes: 2

Related Questions