如何使用document.getElementById（'elementID'）從JavaScript中的紙張輸入元素獲取值

Question

我無法在Polymer js中檢索紙張輸入的值。 我正在使用紙張輸入，當我嘗試使用document.getElementById（'ID'）獲取值時，它不起作用，並說無法讀取null的屬性'value'。

<paper-input id='firstName' label="First name" auto-validate allowed-pattern="([a-zA-Z])" required error-message="Field is required">
</paper-input>
<paper-button id="submitButton" raised type="submit" on-click="validateForm">Submit</paper-button>

JS

validateForm() {
    alert (document.getElementById('firstName').value );
}

Answer 1

在使用Polymer時，使用getElementById（）是一個不好的做法。 相反，我將利用Polymer中的自動節點查找
我在下面添加了一個示例。 我也將點擊更改為點按，Polymer建議這樣做。
A以外的方法是用querySelector（）值來獲取值如圖所示這里 。 但是，我更喜歡采用數據綁定的方式。

<dom-module id="x-custom">
  <template>
    <paper-input id='firstName' label="First name" value="[[inputValue]]"
                 auto-validate allowed-pattern="([a-zA-Z])" required error-message="Field is required">
   </paper-input>
   <paper-button id="submitButton" raised
                 on-tap="validateForm">Submit</paper-button>
  </template>

  <script>
    Polymer({
      is: 'x-custom',
        properties: {
          inputValue: {
            type: String
        }
      },

      validateForm: function() {
        console.log(this.inputValue);
      }
    });
  </script>
</dom-module>