Change Color onClick in HTML / CSS-CodePudding

I want to understand how this works. In the HTML is used the onclick="changeColor(this)" to communicate with the js. But if I change the word this in the HTML the code stops working. Why?

HTML:

<!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.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="script" href="script.js">
    <title>Tente você</title>
</head>
<body>
    <div onclick="changeColor(this)" style="background-color: blue;">
        Me aperte para mudar de cor!
    </div>
    <script src="script.js"></script>
</body>
</html>

JS:

function changeColor(element) {
    var currentColor = element.style.backgroundColor;
    if (currentColor == "red") {
        element.style.backgroundColor = "green";
    }
    
    else {
        element.style.backgroundColor = "red";
    }
}

CodePudding user response：

this is a javascript keyword, that refers to the element (the div) in this case. If you change it, the div won't be passed to the function, therefore you won't be able to access it and change the background-color.

CodePudding user response：

this is a complex topic in JS. the answer of philale would satisfies but if you want to know more about this I suggest reading this article.

gentle-explanation-of-this-in-javascript

CodePudding user response：

this is a reference to the element which is clicked. If you change that, you change what the element argument is in the function.

However, it's worth noting that the approach of using onclick inline event handlers is outdated and no longer good practice. The better approach is to use unobtrusive event handlers, contained in the JS logic directly:

document.querySelectorAll('div').forEach(div => {
  div.addEventListener('click', changeColor);
});

function changeColor(event) {
  const element = event.target;

  var currentColor = element.style.backgroundColor;
  if (currentColor == "red") {
    element.style.backgroundColor = "green";
  } else {
    element.style.backgroundColor = "red";
  }
}

div {
  background-color: blue;
}

<div>
  Me aperte para mudar de cor!
</div>

CodePudding user response：

Alternatively to using this it is possible to pass in the event of the click, handy when more information should be passed to the function. Change in HTML: onclick="changeColor(event)"

     function changeColor(event) {
        let element = event.currentTarget
        var currentColor = element.style.backgroundColor;
        if (currentColor == "red") {
            element.style.backgroundColor = "green";
        }
        
        else {
            element.style.backgroundColor = "red";
        }
     }

If you do not want to pass the event, it can be done like this in Javascript:

     function changeColor() {
        let element = this.changeColor.caller.arguments[0].currentTarget        
        var currentColor = element.style.backgroundColor;
        if (currentColor == "red") {
            element.style.backgroundColor = "green";
        }
        
        else {
            element.style.backgroundColor = "red";
        }
     }