document.getElementById（ 'elementID'）を使用して、JavaScriptの紙入力エレメントから値を取得する方法

Question

ポリマー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

ポリマーでの作業時getElementByIdを（）を利用する悪い習慣です。むしろそれは私が使用するだろうAutomatic node finding in Polymer
私は以下の例を加えました。 Polymerがこれを推奨しているので、あなたのオンクリックをオンタップに変更しました。
querySelector（）。値 で値を取得する方法は、hereです。しかし、私はそれを行うためのデータバインディング方法を好む。

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