Question

0

46

Views

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?

7 months ago · Santiago Gelvez

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-24T20:02:17.291Z

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';
});