如何使用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>