Question

我现在想在聚合物中创建两个按钮，我想向两个按钮添加事件列表器，如何向它们添加事件列表器？在这里，我要添加两个onclick事件，一个用于提交按钮，另一个用于添加customerbutton，但是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`
   }

Answer 1

您应该将事件添加到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);
}

单击事件到多个按钮

1 个答案: