CODEWITHSUNDEEP
javascripthtmlcss
john jacobs
john jacobs

Reputation: 31

Changing text color after input is clicked

I created a change background color button using only css and the problem I'm facing is the text stays the same color after the background color changed.

The label's ID is "switch" for changing the background. The text's ID is "par".

Here is what I've tried:

document.getElementById("switch").onclick = function() {
  document.getElementById("par").style.color = 'red';
}

I put an alert message first to test it was working, and when I clicked on the input button the message box alert came up. Yet when I replace the alert box with the code from above, my text stays the same color.

Any recommendations?

Upvotes: 1

Views: 75

Answers (1)

gulalicelik
gulalicelik

Reputation: 51

document.getElementById("switch").addEventListener("click", ()=>{
 document.getElementById("par").style.color = 'red';
});
#switch{
height : 100px;
width : 100px;
background-color : orange;
opacity;0.25;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
    <div id="switch">
      <p id="par">foo bar </p>
    </div>
</body>
</html>

document.getElementById("switch").addEventListener("click", ()=>{
 document.getElementById("par").style.color = 'red';
});

Upvotes: 2

Related Questions