在JavaScript中使用模块模式时，如何引用DOM元素？

如何从封装的JavaScript对象中获取DOM元素的值？ 这是行不通的。我什么也得不到。我认为该页面没有呈现，因此无法看到，但我将其放入.ready函数，然后继续未定义

$（文档）.ready（函数（）{
获取贷款={
myModal:function（）{
返回文档。查询选择器（“myModal”）
},
myModalBody:函数（）{
返回文档。查询选择器（“.modal body”）
},
getNewLoans:function（）{
var-xhr；
xhr=newXMLHttpRequest（）；
var url=“/api/books”；
xhr.open（“GET”，url，true）；
xhr.responseType='json'；
xhr.send（null）；//或您的数据
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&（xhr.status==200））{
var结果=xhr.response；
for（var输入结果）{
if（result.hasOwnProperty（key））{
//console.log（结果[key].customer\u id）；
this.myModalBody.innerHTML=result[key]。用户id；
}
}
}
}
//var serverResponse=xhr.responseText；
//this.myModalBody.innerHTML=serverResponse；
},
bindUIActions:function（）{
//this.myModalBody.addEventListener（“单击”，this.getNewLoans（），false）；
},
init:function（）{
这是getNewLoans（）；
//这个.bindUIActions（）；
}
};
GetLoans.init（）；
});

&时代；
情态标题
...
接近
保存更改
首先，您正在引用的
此
对象未正确绑定到您的模块。从调用中删除对
this
的引用，因为使用它的函数与它们需要访问的函数在同一范围内

您确实有获取DOM引用的模块方法：

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

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

但是，在编写时，实际上并没有调用这些方法：

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

你需要写：

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

以便调用函数并使用函数的返回值

如果没有调用括号，您将查找名为
innerHTML
的
myModalBody
函数/对象的不存在的属性

此外，在事件接线代码中，您有：

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

它不应该包含括号，因为它会立即调用方法，导致事件处理程序成为AJAX调用的结果（很可能不是函数，对吧？）。尝试：


$（文档）.ready（函数（）{
获取贷款={
myModal:function（）{
返回文档。查询选择器（“myModal”）
},
myModalBody:函数（）{
返回文档。查询选择器（“.modal body”）
},
getNewLoans:function（）{
var-xhr；
xhr=newXMLHttpRequest（）；
var url=“/api/books”；
xhr.open（“GET”，url，true）；
xhr.responseType='json'；
xhr.send（null）；//或您的数据
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&（xhr.status==200））{
var结果=xhr.response；
for（var输入结果）{
if（result.hasOwnProperty（key））{
//console.log（结果[key].customer\u id）；
myModalBody（）.innerHTML=result[key]。用户id；
}
}
}
}
var serverResponse=xhr.responseText；
myModalBody（）.innerHTML=serverResponse；
},
bindUIActions:function（）{
myModalBody（）.addEventListener（“单击”，获取新贷款，错误）；
},
init:function（）{
这是getNewLoans（）；
//这个.bindUIActions（）；
}
};
GetLoans.init（）；
});

&时代；
情态标题
...
接近
保存更改
您完全可以在没有任何模块的情况下执行此操作？！请注意，
myModalBody
是模块的一个方法，但您没有调用它。
this.myModalBody.addEventListener（“单击”，this.getNewLoans（），false）应该是
this.myModalBody.addEventListener（“单击”，this.getNewLoans.bind（this），false）
他试图使用调用
document.querySelector（“#myModal”）
的
myModal
方法。他只是做错了。@Barmar我知道，我在编辑我的答案以便更完整。@Barmar我仍然做错了。我没有定义。我正在看。@johnny在回调中使用
this
的问题中看到了重复的问题。我将查看重复的问题。上面所说的不起作用，但我毫不怀疑这是我和一些显而易见的东西。
 myModalBody.addEventListener("click", getNewLoans, false);