I'm trying to change the color of the text after a button click. Currently, the text color is blue before clicking the button, but I want it to be green after the click. I've searched online for solutions, but I haven't been successful. Here's my code:
button {
border: 1px solid black;
color: white;
background-color: black;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
transition-duration: .5s;
}
button:hover {
background-color: blue;
}
p {
color: blue;
font-size: 20px;
}<p id="demo">Hello everyone! I will get changed after being clicked :)</p>
<button onClick='document.getElementById("demo").innerHTML = "I appear after clicking the button :P"' class="xx">Click</button>I'm new to JavaScript, so I'm struggling to achieve the desired result. I've tried adding (id="xx") after .innerHTML inside the <button> tag and styling it with CSS, but it didn't work as expected:
<!DOCTYPE html>
<html>
<head>
<style>
button {
border: 1px solid black;
color: white;
background-color: black;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
transition-duration: .5s;
}
button:hover {
background-color: blue;
}
#xx {
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<p id="demo">Hello everyone! I will get changed after being clicked :)</p>
<button onClick='document.getElementById("demo").innerHTML(id="xx") = "I appear after clicking the button :P"' class="xx">Click</button>
</body>
</html>I've tried various unsuccessful attempts, and I'm stuck. Can someone guide me on how to change the text style after clicking the button?
Here's an example of the desired output: