How do I reference a DOM element when using the Module Pattern in JavaScript?

Question

How do I get the value of a DOM element from an encapsulated JavaScript object? This does not work. I get nothing as in undefined. I thought the page wasn't rendering and thus couldn't be seen, but I put it in the .ready function and I continue to get undefined.

$(document).ready(function() {
  GetLoans = {
    myModal: function() {
      return document.querySelector("#myModal")
    },
    myModalBody: function() {
      return document.querySelector(".modal-body")
    },
    getNewLoans: function() {
      var xhr;
      xhr = new XMLHttpRequest();
      var url = "/api/books";
      xhr.open("GET", url, true);
      xhr.responseType = 'json';
      xhr.send(null); //or your data
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && (xhr.status == 200)) {
            var result = xhr.response;
            for (var key in result) {
              if (result.hasOwnProperty(key)) {
                //console.log(result[key].patron_id);
                this.myModalBody.innerHTML = result[key].patron_id;
              }
            }
          }
        }
        // var serverResponse = xhr.responseText;
        // this.myModalBody.innerHTML = serverResponse;
    },
    bindUIActions: function() {
      // this.myModalBody.addEventListener("click", this.getNewLoans(), false);

    },
    init: function() {
      this.getNewLoans();
      //this.bindUIActions();

    }
  };
  GetLoans.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Uncaught TypeError: Cannot set property 'innerHTML' of undefined
    at XMLHttpRequest.xhr.onreadystatechange

No jQuery please (yes, I know I am using the Document.Ready function.)

Notice that `myModalBody` is a method of your module, but you are not calling it. — Bergi, Feb 07 '17 at 22:34
`this.myModalBody.addEventListener("click", this.getNewLoans(), false);` should be `this.myModalBody.addEventListener("click", this.getNewLoans.bind(this), false);` — Barmar, Feb 07 '17 at 22:42

Scott Marcus · Answer 1 · 2017-02-07T22:51:50.170

First, the this object that you are referencing is not bound to your module correctly. Remove the reference to this from your invocations because the functions where you are using it are in the same scope as the functions that they need to access.

You do have module methods to get DOM references:

myModalBody: function() {
  return document.querySelector(".modal-body")
}

myModal: function() {
  return document.querySelector("#myModal")
}

But, you are not actually invoking these methods when you write:

this.myModalBody.innerHTML = result[key].patron_id;

You need to write:

myModalBody().innerHTML = result[key].patron_id;

So that the function gets invoked and the return value of the function is used.

Without the invocation parenthesis, you are looking for a property of the myModalBody function/object called innerHTML that doesn't exist.

Also, in your event wiring code, you have:

 this.myModalBody.addEventListener("click", this.getNewLoans(), false);

Which should not include the parenthesis because it will invoke the method immediately causing the event handler to be the result of the AJAX call (which is most-likely not a function, right?). Try:

 myModalBody.addEventListener("click", getNewLoans, false);

$(document).ready(function() {
  GetLoans = {
    myModal: function() {
      return document.querySelector("#myModal")
    },
    myModalBody: function() {
      return document.querySelector(".modal-body")
    },
    getNewLoans: function() {
      var xhr;
      xhr = new XMLHttpRequest();
      var url = "/api/books";
      xhr.open("GET", url, true);
      xhr.responseType = 'json';
      xhr.send(null); //or your data
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && (xhr.status == 200)) {
            var result = xhr.response;
            for (var key in result) {
              if (result.hasOwnProperty(key)) {
                //console.log(result[key].patron_id);
                myModalBody().innerHTML = result[key].patron_id;
              }
            }
          }
        }
        var serverResponse = xhr.responseText;
        myModalBody().innerHTML = serverResponse;
    },
    bindUIActions: function() {
      myModalBody().addEventListener("click", getNewLoans, false);

    },
    init: function() {
      this.getNewLoans();
      //this.bindUIActions();

    }
  };
  GetLoans.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

He's trying to use the `myModal` method that calls `document.querySelector("#myModal")`. He's just doing it wrong. — Barmar, Feb 07 '17 at 22:36
@Barmar I know, I was editing my answer to be more complete. — Scott Marcus, Feb 07 '17 at 22:37
@Barmar I'm still doing it wrong. I get undefined. I am looking at it. — johnny, Feb 07 '17 at 22:41
@johnny See the duplicate question for the problem with using `this` in the callback. — Barmar, Feb 07 '17 at 22:42
I will look at the duplicate. Above is not working, but I have no doubt it is me and something obvious. — johnny, Feb 07 '17 at 22:43

How do I reference a DOM element when using the Module Pattern in JavaScript?

1 Answers1