Javascript 为什么我的输入搜索eventlistener不起作用？

我正在开发一个搜索城市的应用程序。它返回一张印有国旗、首都、人口和地区的卡片；但是，只有在我尝试将

eventListener

添加到输入搜索之前，它才会起作用，之后，它什么也不做

我是不是打错了搜索电话？我应该做一个搜索功能吗

附言：我6个月前开始编写代码，如果这是一个构造不好的代码，我很抱歉

const-APICALL='1〕https://restcountries.eu/rest/v2/';
const form=document.querySelector（'.recherche'）
常量输入=document.querySelector（'.inpRecherche'）；
const searchBtn=document.querySelector（'.searchBtn'）；
const affichage=document.querySelector（'.affichage'）；
让城市=[]；
//API调用
异步函数dataApi（城市）{
const call=等待获取（APICALL）；
const data=await call.json（）；
城市=数据；
//console.log（城市）；
创建卡（城市）；
}
dataApi（城市）
功能创建卡（城市）{
for（设i=0；i
首都：${[cities[i].capital]}
人口：${[城市[i].人口]}
区域：${[cities[i].subsection]}

`;
affichage.innerHTML=cardHTML；
}
}
searchBtn.addEventListener（'click'，dataApi）；
表格.addEventListener（'submit'，（e）=>{
e、 预防默认值（）
如果（e.value>0）{
//log（'hello'）；
dataApi（[城市[i]]）；
input.value=“”；
}
})

*，
：：之前，
：：之后{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
高度：100vh；
背景图片：url（“background.jpg”）；
字体系列：Arial、Helvetica、无衬线字体；
背景尺寸：封面；
}
h1{
字体大小：35px；
文本对齐：居中；
利润率：30像素；
}
inpRecherche先生{
显示：块；
宽度：250px；
填充：3倍；
字体大小：12px；
}
形式，
阿菲查奇先生{
显示器：flex；
宽度：100%；
高度：自动；
对齐项目：居中；
证明内容：中心；
边界半径：2px；
}
阿菲查奇先生{
位置：绝对位置；
证明内容：中心；
边框：2倍纯白烟；
边界半径：5px；
宽度：300px；
高度：300px；
利润率：20px 480px；
}
.searchBtn{
高度：25px；
填充物：2px 5px；
背景色：#2896F6；
盒影：无；
光标：指针；
颜色：白烟；
字体大小：粗体；
边框半径：3倍纯白；
}
.searchBtn:悬停{
背景色：#167CD4；
}
/*一个聚会
*/
.卡片{
宽度：500px；
高度：自动；
位置：相对位置；
利润上限：200px；
垫底：20px；
边界半径：5px；
背景颜色：米色；
}
.阿凡达{
高度：150像素；
宽度：150px；
边缘顶部：80px；
边界半径：50%；
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
背景色：#000；
边框：1px纯黑；
}
氢{
边缘顶部：100px；
文本对齐：居中；
字体大小：25px；
}
.continfos{
边框顶部：1px黑色虚线；
边缘顶部：20px；
列表样式类型：无；
}
李{
填充：10px 20px；
文本对齐：对齐；
字体大小：22px；
}
李：第n个孩子（1）{
边缘顶部：15px；
}

---

City finder你好，欢迎来到StackOverflow。
我不完全确定您想做什么，但现在，您的函数
createCard
并不是在API提供的所有城市中循环，而是在
cardHTML
的内容上反复编写。要显示所有城市，您可以在
=
前面添加
+
，然后

功能创建卡（城市）{
for（设i=0；i
首都：${[cities[i].capital]}
人口：${[城市[i].人口]}
区域：${[cities[i].subsection]}

`;
affichage.innerHTML+=cardHTML；
}
}

并将css类更改为


阿菲查奇先生{
证明内容：中心；
边框：2倍纯白烟；
边界半径：5px；
宽度：90vw；
高度：自动；
保证金：20px自动0自动；
显示器：flex；
柔性流：行换行；
}
.阿凡达{
高度：150像素；
宽度：150px；
利润率：10px自动；
边界半径：50%；
位置：初始；
背景色：#000；
边框：1px纯黑；
利润率：10px自动；
}

但是，请注意，以这种方式构建html可能非常危险，请参阅

要使用输入搜索城市，是的，您需要自己构建一个搜索函数，并显示结果。可能是一种方法
我注意到的第一件事是传递给dataApi函数的参数。当您将其传递给事件侦听器时，它接收到的是一个
事件
对象（您只是将其命名为“cities”），然后您试图用API调用中的数据覆盖它，而不是更新全局
cities
数组。
您能否详细说明“它在..之前有效”的确切含义？后来什么不起作用了？我的意思是运行的代码我手动搜索时确实有一个标志，一个大写字母，人口等。提交功能毫无意义，确定你为什么有这个功能，还有按钮点击。这就是我想你的，我会再试一次：）谢谢你，非常感谢，我会努力的