Javascript 模块模式，我做错了什么？

我想在这个简单的应用程序上使用模块模式，您可以在其中搜索国家，并显示一些城市。我读过关于模块模式的书，它似乎是一件有用的东西

我需要一些语法方面的帮助。我写的东西我认为是正确的，但它不起作用，所以我把它评论了出来，有人可以试着向我解释如何在我自己的例子中使用它，这对我来说更容易理解。你可以在下面看到我试过的代码

“searchElements”和“GetAllegements”是我希望在模块文件中包含的函数，以及JSON对象

//var search\u elements=（函数（）{
变量搜索元素=
document.getElementById（“btn”）.addEventListener（“单击”，（e）=>{
container.innerHTML=“”；
e、 预防默认值（）；
var innerDiv=document.getElementsByTagName（“div”）；
var输入=document.getElementById（“输入”）.value；
对于（变量i=0；i{
container.innerHTML=“”；
e、 预防默认值（）；
var innerDiv=document.getElementsByTagName（“div”）；
对于（var getAll=0；getAll

您正在将

searchElements

设置为

addEventListener（）

的结果，该结果是

未定义的

。您还可以在返回对象后关闭事件处理函数，该函数将不起作用。@MikeMcCaughan okey，因此我必须在“}”之后加上“return{searchElements:searchElements}”最后？addEventListener为空是什么意思？我应该将“searchElements”设置为什么？sry，我不熟悉JS，有很多问题。非常感谢您迄今为止的帮助：）是的，所以这里似乎缺少太多的背景知识，我无法在整个教程中回答。你可能应该看看一些教程网站，了解模块模式是什么，以及为什么要使用它。参见示例和其他。

// var search_elements = (function(){

var searchElements = 
document.getElementById("btn").addEventListener("click", (e) => {
container.innerHTML = "";
e.preventDefault();
var innerDiv = document.getElementsByTagName("div");
var input = document.getElementById("input").value;

for(var i = 0; i < arrayList.length; i += 1) {
    target = arrayList[i].land.toLowerCase();

    if(input.toLowerCase() === target.toLowerCase()) {
        var newCard = document.createElement("div");
        var landElement = document.createElement("P");
        var landContent = document.createTextNode(arrayList[i].land);
        landElement.appendChild(landContent);
        var byElement = document.createElement("h3");
        var byContent = document.createTextNode(arrayList[i].by);
        byElement.appendChild(byContent);
        var img = document.createElement("img");
        img.setAttribute("src", arrayList[i].img);
        newCard.appendChild(img);
        newCard.appendChild(landElement);
        newCard.appendChild(byElement);
        container.appendChild(newCard);
    } else {
        continue;
    }
}

return {
  searchElements: searchElements
 }
});


// var get_all = (function(){

var getAllElements = 
document.getElementById("btnTwo").addEventListener("click", (e) => {
container.innerHTML = "";
e.preventDefault();
var innerDiv = document.getElementsByTagName("div");

for(var getAll = 0; getAll < arrayList.length; getAll += 1){
    var newCard = document.createElement("div");
    var landElement = document.createElement("P");
    var landContent = document.createTextNode(arrayList[getAll].land);
    landElement.appendChild(landContent);
    var byElement = document.createElement("h3");
    var byContent = document.createTextNode(arrayList[getAll].by);
    byElement.appendChild(byContent);
    var img = document.createElement("img");
    img.setAttribute("src", arrayList[getAll].img);
    newCard.appendChild(img);
    newCard.appendChild(landElement);
    newCard.appendChild(byElement);
    container.appendChild(newCard);
}

return {
  getAllElements: getAllElements
}
});