I've come across an issue in my CSS where I have a class called hide that I applied to a textarea. When clicking a button, I want the class to be removed, but for some reason, it's not working as expected. I even added an alert in the function to check if it's triggered upon button press, and it is. However, changing it to removeClass didn't resolve the problem either.
(On another note, the textarea styling in the CSS doesn't seem to be taking effect, although it's not a critical issue)
Here's the relevant HTML:
<button id="note1btn" data-role="button">Note #1</button>
<textarea id="note1input" class="hide" rows="10" cols="50"></textarea>
CSS snippet:
#textarea {
width: 100%;
height: 100%;
font: 1em arial;
color: rgba(50, 82, 50, 1.0);
}
#textarea:focus {
color: rgba(50, 82, 50, 1.0);
border: 2px solid #96c56f;
box-shadow: 0px 1px 1px #888888;
}
.hide {
visibility: hidden;
height: 1px !important;
padding: 0px !important;
margin: 0px !important;
}
Javascript function:
$(document).ready(function () {
note1btn.addEventListener("click", displayNote);
//DISPLAY NOTE
function displayNote() {
alert("TEST");
$("note1input").removeClass("hide");
}
});