0

Trying to get a CSS element into JavaScript to animate it but it just isn't working.

HTML (index.html)

<script src="bruh.js"></script>
<link rel="stylesheet" href="style.css">.

...

<div class="circle">
    </div>

CSS (style.css)

.circle {
    background-color: blue;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

JS (bruh.js)

const element = document.querySelector('.circle');
const style = getComputedStyle(element);

console.log(style);

Console:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

OryxGD
  • 1
  • 2
  • 1
    Try `const element = document.querySelector(".circle")` to get the first element with that class. FYI, when using `getElementsByClassName()`, don't include the `.` – Phil Jul 26 '22 at 01:30
  • @Phil I accidentally left it like that after testing for a solution. It was originally ```const element = document.querySelector(".circle")```. I will edit the post now. – OryxGD Jul 26 '22 at 01:33
  • I've added another link at the top which will explain why you're not finding the element – Phil Jul 26 '22 at 01:34
  • 1
    The script tag was called before the div was created in the html document. Works perfectly now. – OryxGD Jul 26 '22 at 01:48

0 Answers0