Hice una función simple que imprime el elemento en la consola antes de cambiar el color del texto cuando hago clic en "Hacer clic".
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>En fragmento, funciona como esperaba. como abajo
<button class="title">Click me</button>Pero, cuando probé esto en local. Siempre se imprime así
<button class="title" style="color: red;">Click me</button> El resultado no debería implicar style="color: red; porque console.log se ejecuta antes de cambiar de color.
Mismo código pero resultado diferente, no sé cuál es el motivo de esto.