Comment puis-je référencer un élément DOM lorsque j'utilise le module Module en JavaScript?

Question

Comment obtenir la valeur d'un élément DOM à partir d'un objet JavaScript encapsulé? Cela ne fonctionne pas. Je n'ai rien comme dans indéfini. Je pensais que la page n'était pas rendue et que je ne pouvais pas la voir, mais je l'ai mise dans la fonction .ready et je continue d'être indéfinie.

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

Non jQuery s'il vous plaît (oui, je sais que je suis en utilisant la fonction document.ready.)

Answer 1

Tout d'abord, l'objet this que vous faites référence n'est pas lié à votre module correctement. Supprimez la référence à this de vos invocations car les fonctions dans lesquelles vous l'utilisez sont dans la même portée que les fonctions auxquelles elles doivent accéder.

Vous avez des méthodes de module pour obtenir des références DOM:

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

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

Mais, vous n'êtes pas invoquez en fait ces méthodes lorsque vous écrivez:

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

Vous devez écrire:

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

Pour que la fonction soit invoquée et que la valeur de retour de la fonction soit utilisée.

Sans la parenthèse d'invocation, vous recherchez une propriété de la fonction/objet myModalBody appelée innerHTML qui n'existe pas.

Aussi, dans votre code de câblage de l'événement, vous avez:

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

Ce qui ne devrait pas inclure la parenthèse parce qu'il invoquera la méthode provoquant immédiatement le gestionnaire d'événements pour être le résultat de l'appel AJAX (ce qui est très probablement pas une fonction, non?). Essayez:

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>