Purpose: My objective is to add a new class to the div that contains a form when a specific icon is clicked. Challenge: The Jquery selector in pullupClose function is not able to identify the element. Check out the console.log result for a visual representation of the issue. Since the element cannot be fetched successfully, the addClass function does not work as intended. Can someone help me identify and fix the mistake I may have made? Thanks in advance!
HTML
<div class="sidepullup" id="idSidePullup">
<iron-icon class="cross" on-click="pullupClose" icon="close"></iron-icon>
<iron-form id="idForm">
<form action="/">
<paper-input type"text" label="First Name"></paper-input>
<paper-input type="text" label="Last Name"></paper-input>
<paper-input type="text" label="Title"></paper-input>
<paper-input type="text" label="About"></paper-input>
<paper-button style="background-color: #03a9f4; color: white" raised onclick="onFormSubmit()">Submit Changes</paper-button>
</form>
</iron-form>
</div>
Script
<script>
class IronListComponent extends Polymer.Element {
static get is() {return 'iron-comp'}
ready() {
super.ready();
var that = this;
}
pullupClose() {
var element = $("#idSidePullup");
console.log('console log of $("#idSidePullup") = ', element);
$("#idSidePullup").addClass('hidePullup');
$("#idSidePullup").css("display", "none");
}
window.customElements.define(IronListComponent.is, IronListComponent);
</script>