Change Color onClick in HTML / CSS

Question

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";
    }
}

philale · Accepted Answer · 2022-10-22 15:07:21Z

4

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.

answered Oct 22, 2022 at 15:07

philale

4274 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hesam · Accepted Answer · 2022-10-22 15:15:32Z

0

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

answered Oct 22, 2022 at 15:15

Hesam

742 silver badges8 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2022-10-22 15:28:47Z

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>

MJG · Accepted Answer · 2022-10-22 15:38:24Z

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";
        }
     }

Collectives™ on Stack Overflow

Change Color onClick in HTML / CSS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related