console.log(Element) after change style. But not working I expected. Different result in local chrome and snippet in StackOverflow

Question

I made a simple function which print element in console before change a text color when I click the "Click me".

function addEventToTitle(){
    const title = document.getElementsByClassName("title")[0];
    title.addEventListener('click', changeColorOfTitle);
  }
  
  function changeColorOfTitle(){
    const title = document.getElementsByClassName("title")[0];
    console.log(title);
    title.style.color = "red";
  }
  
  addEventToTitle();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script defer type="text/javascript" src="test.js"></script>
    <title>Document</title>
</head>
<body>
    <Button class="title">Click me</Button>
</body>
</html>

In snippet, It works like I expected. like below

<button class="title">Click me</button>

But, when I tried this in local. It always prints like this

<button class="title" style="color: red;">Click me</button>

The result should not imply style="color: red; because console.log is executed before change color.

Same code but different result, I don't know what is the reason for this.

console.log(Element) after change style. But not working I expected. Different result in local chrome and snippet in StackOverflow

0 Answers0