TypeError: document.getElementById() имеет значение null, но идентификатор правильный, так как я также назвал другую форму

Я пытаюсь выполнить функцию, но эта ошибка продолжает появляться в консоли

TypeError: document.getElementById(...) is null fetch http://localhost:8082/app.js:28368

Вот HTML-код

<form id="player2">
           <div class="form-group">
            <label>Player 2 - From address:</label>
            <input type=" type" class="form-control" id="fromAddress2">
          </div>
          <input type="submit" value="player2" class="btn-primary" />

        </form>

Вот App.js

function fetch(){

document.getElementById("player2").addEventListener("submit", function(e){
  e.preventDefault();

 var fromAddress2 = document.getElementById("#player2 #fromAddress2").value;

console.log(fromAddress2);

OraclizeContract.deployed().then(function(instance) {

  console.log("Initializing");
  instance.deposit({from: fromAddress2, 
                    gas: 3000000,
                    value: web3.toWei(1, 'ether')}) //betAmount is a input box and fetching its value into betamount variable and passing it over here
                               .then(function(v){
                                       console.log(v);
                                       console.log("Function Executed");

                                 });
                       }).then(function() {
                                              console.log("Testing");
                       }).catch(function(e) {
                                               console.log(e);
                       });

})
}

Я проверил идентификаторы, но они верны, не могу понять, почему это не работает. Любая помощь приветствуется.