When a button is clicked, I want its color to change.
Below are the HTML elements in question:
<div class='chatbot-container'>
<div class='chatbot-wrapper' id='chatbot-wrapper' style="display:none;" >
<iframe
id="chatbot"
class="chatbot"
allow="microphone;"
src="https://console.dialogflow.com/api-client/demo/embedded/xxx-xxx-xxx"></iframe>
</iframe>
</div>
<button class='chat-btn' type="button" onclick="toggleChatbot()">Q</button>
</div>
Here is the CSS stylesheet:
.chat-btn {
background: red;
color: #fff;
font-size: 32px;
....
<code snipped for brevity>
...
}
.chat-btn:hover {
background: #fff;
color: red;
}
.chat-btn:active {
background: #fff;
color: red;
}
And here is the JavaScript code:
<script>
function toggleChatbot (chatBtn) {
var x = document.getElementById("chatbot-wrapper");
if (x.style.display === "none") {
x.style.display = "block";
chatBtn.className += ' active';
console.log(chatBtn.active)
} else {
x.style.display = "none";
chatBtn.className = chatBtn.className.replace(" active", "");
console.log(chatBtn.active)
}
}
</script>
Although the 'active' class is added as expected, the CSS pseudo-class styles are not being applied. You can view a snapshot here.