JavaSctipt: Change color of a text element on button click

Question

I am completely new to HTML and JavaScript, and I wanted to do something simple. I want a button, and below it was some text. When I clicked the button, I want the color of the text to change(Let's assume black to red for now). This is my attempt at this problem.

HTML File:

<!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">
    <title>First Page</title>
</head>
<body>
    <button id="BUTTON" onclick="changeColor">Click me</button>
    <p id="TEXT">Text</p>
</body>
<script src="first.js"></script>
</html>

first.js:

var button = document.getElementById("BUTTON");
var color = document.getElementById("TEXT").style.color;

function changeColor(color) {
    color = "#0EE5D0";
};
button.onclick = changeColor();

Thanks!

Does this answer your question? [Change Button color onClick](https://stackoverflow.com/questions/26937424/change-button-color-onclick) — MCC, Jul 20 '21 at 18:09
`var color = document.getElementById("TEXT").style.color;` only references the value, it is not a link to the property. — epascarello, Jul 20 '21 at 18:11
`button.onclick = changeColor();` <-- wrong, you are calling the function, and assigning what it returns to the onclick event listener — epascarello, Jul 20 '21 at 18:11
`button.onclick = changeColor();` doesn't assign the function to the onclick event. It calls the function and assigns the return value of the function to onclick, and that's not your intention. — devlin carnate, Jul 20 '21 at 18:11
@devlincarnate because OP is new to Javascript. On another note: This "could" actually be the problem ;) — madflow, Jul 20 '21 at 18:13

score 0 · Answer 1 · answered Jul 20 '21 at 18:14

Here is a snippet that does what you asked for.

I removed the color variable and replaced it with text, the element that you want to change the color of.
I modified the changeColor function to return the chosen color.
Correctly used the onclick listener.

let button = document.getElementById("BUTTON");
let text = document.getElementById("TEXT")

function changeColor() {
  return "#0EE5D0";
};

button.addEventListener("click", () => {
  text.style.color = changeColor()
})

<!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">
  <title>First Page</title>
</head>

<body>
  <button id="BUTTON" onclick="changeColor">Click me</button>
  <p id="TEXT">Text</p>
</body>
<script src="first.js"></script>

</html>

score 0 · Answer 2 · answered Jul 20 '21 at 18:14

There are two main issues with your code. Both have been identified in the comments above.

First, button.onclick = changeColor(); doesn't assign the function to the onclick event. It calls the function and assigns the return value of the function to onclick, and that's not your intention.

Second, color = "#0EE5D0"; is not associated with the DOM element, so changing its value has no impact on the DOM element.

var button = document.getElementById("BUTTON");

button.onclick =function changeColor() {
    document.getElementById("TEXT").style.color = "#0EE5D0";
};

JavaSctipt: Change color of a text element on button click

2 Answers2