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