Нажмите событие для нескольких кнопок - PullRequest
Новая
       9

Нажмите событие для нескольких кнопок

0 голосов
/ 11 июля 2019

Я пытаюсь создать две кнопки из полимера, теперь я хочу добавить список событий к обеим кнопкам. Как я могу добавить к ним EventListener? Здесь я добавляю два события onclick, одно для отправки кнопки, а другое для добавления кнопки customer, но событие onclick работает только для одной кнопки. 

<paper-material elevation="1" class="form-popup" id="customerForm">
    <paper-input label="first name"></paper-input>
    <paper-input label="last name"></paper-input>
    <paper-input label="mobile number" char-counter maxlength="10"></paper-input>
    <paper-button raised class="custom indigo" on-click="closeForm()" id="submit">Submit</paper-button>

    </paper-material>
<!--add customer button-->
    <paper-material elevation="0" id="addCustomer"> 
    <paper-button raised class="custom indigo" on-click="openForm()">add-customer</paper-button>
<!--add money button-->
    <paper-material elevation="0" class="bottom-right" id="addMoney">
          <paper-button raised>
            <iron-icon icon="icons:add-circle"></iron-icon>Add Amount
          </paper-button>
    </paper-material>
<!--deduct money button-->
    <paper-material elevation="0" class="bottom-left" id="deductMoney">
          <paper-button raised>
            <iron-icon icon="icons:cancel"></iron-icon> Deduct Amount
          </paper-button>
    </paper-material>

 `;
  }
  static get properties() {
    return {

    };
  }

constructor() {
  super();
  this.addEventListener('click', this.openForm.bind(this));
  //this.addEventListener('click', this.closeForm.bind(this));
}





 openForm() {
    //document.getElementById("myForm").style.display = "block";
this.$.addCustomer.style.display="none"
this.$.addMoney.style.display="none"
this.$.deductMoney.style.display="none"
this.$.customerForm.style.display="block"

   }

  closeForm() {
  //document.getElementById("myForm").style.display = "none";
   this.$.addCustomer.style.display="block"
   this.$.addMoney.style.display="block"
   this.$.deductMoney.style.display="block"
   this.$.customerForm.style.display="none"`enter code here`
   }

1 Ответ

0 голосов
/ 15 июля 2019

Вы должны добавить события в connectedCallback, также вам нужно указать, какие именно кнопки будут делать. 

<paper-material elevation="1" class="form-popup" id="customerForm">
    <paper-input label="first name"></paper-input>
    <paper-input label="last name"></paper-input>
    <paper-input label="mobile number" char-counter maxlength="10"></paper-input>
    <paper-button raised class="custom indigo" on-click="closeForm()" id="submit">Submit</paper-button>

    </paper-material>
<!--add customer button-->
    <paper-material elevation="0" id="addCustomer"> 
    <paper-button raised class="custom indigo" on-click="openForm()" id="open">add-customer</paper-button>
<!--add money button-->
    <paper-material elevation="0" class="bottom-right" id="addMoney">
          <paper-button raised>
            <iron-icon icon="icons:add-circle"></iron-icon>Add Amount
          </paper-button>
    </paper-material>
<!--deduct money button-->
    <paper-material elevation="0" class="bottom-left" id="deductMoney">
          <paper-button raised>
            <iron-icon icon="icons:cancel"></iron-icon> Deduct Amount
          </paper-button>
    </paper-material>

 `;
  }
  static get properties() {
    return {

    };
  }

constructor() {
  super();
  this._boundOpen = this.openForm.bind(this);
  this._boundClose = this.closeForm.bind(this);
}

connectedCallback() {
  this.shadowRoot.querySelector('#submit').addEventListener('click', this._boundOpen);
this.shadowRoot.querySelector('#open').addEventListener('click', this._boundClose);
}
...