title: Javascript - Cannot read property 'trim' of undefined
body: <p>This is the form I have created in my website. I need to get the input values.</p>
  
  <pre><code>&lt;div id="addPlayerForm" style="display:none;"&gt;  
    &lt;form&gt;
                  &lt;input class="my-input" type="text" placeholder="Name" 
                  id="player_name"&gt;&lt;/input&gt;
                  &lt;/br&gt;
                  &lt;input class="my-input" type="text" 
                  placeholder="Position" id="player_position" 
                  style="text-transform:uppercase;"&gt;&lt;/input&gt;
                  &lt;/br&gt;
                  &lt;input class="my-input" type="number" 
                  placeholder="Rating" id="player_rating"&gt;&lt;/input&gt;
                  &lt;/br&gt;
                  &lt;button class="waves-effect waves-light btn" 
                  style="background:#01579B;margin-bottom:3rem;" 
                  onClick="pushPlayer()"&gt;Add Player&lt;/button&gt;
   &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is pushPlayer() Function:
  Here I have used getElementById to take the values from input. And also the name.value is getting undefined! And I believe trim() is not working as the value is undefined. But I don't know where am getting wrong. </p>
  
  <pre><code>function pushPlayer() {
  var name = document.getElementById('player_name');
  console.log(name.value);
  if (document.getElementById("player_name").value.trim() !== '' &amp;&amp; 
  document.getElementById("player_position").value.trim() &amp;&amp; 
  document.getElementById("player_rating").value.trim() !== '') {
      var playerName = document.getElementById('player_name').value;
      var playerPosition = 
  document.getElementById('player_position').value;
      var playerRating = document.getElementById('player_rating').value;
      firebase.database().ref('playersList/').push({
          Name: playerName,
          Position: playerPosition,
          Rating: playerRating
      });
      Materialize.toast('Player Added to the database', 500);
  } else {
      Materialize.toast('Type the Details Dude ;)', 1000);
  }
  
  document.getElementById("player_name").value = '';
  document.getElementById("player_position").value = '';
  document.getElementById("player_rating").value = '';
  document.getElementById("player_name").focus();
  }
  </code></pre>
  
  <p>This is the error I am getting:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'trim' of undefined
  at pushPlayer (script.js:312)
  at HTMLButtonElement.onclick ((index):409)
  pushPlayer @ script.js:312
  onclick @ (index):409
  </code></pre>
  
  <p>Where is my mistake?
  Can anyone help me please?</p>