如何使用 document.getElementById('elementID') 从 JavaScript 中的纸张输入元素获取值

Question

我无法在 Polymer js 中检索纸张输入的值。我正在使用纸质输入，当我尝试使用 document.getElementById('ID') 获取值时，它不起作用并显示无法读取属性 'value' of null.

<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() 是一种不好的做法。而不是我会利用 Automatic node finding in Polymer
我在下面添加了一个示例。我还按照 Polymer 的建议将您的点击更改为点击。
另一种方法是使用 querySelector().value 获取值如图所示。但是，我更喜欢数据绑定方式。

<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>

如何使用 document.getElementById('elementID') 从 JavaScript 中的纸张输入元素获取值

How to get get the value from a paper input element in JavaScript using document.getElementById('elementID')

html

javascript

polymer