如何创建一个事件，当一个div或它'；s儿童<；p/>；单击的元素在vanilla Javascript中围绕整个div创建边框
我有一个容器，并在其中动态创建div。每个创建的div内部都有2个p元素。如何在每个创建的div中添加onclick函数，以便在单击div或p元素时，绿色边框仅在整个div周围显示。因为现在如果单击p，边框在p周围，而不是在div周围。我必须单击div才能获得正确的边框 此外，当单击一个div时，程序会迭代一个具有正确答案的对象数组，如果单击的div的id在arrays code3值中，我想向div添加一个绿色边框。如果出现错误，请使用红色边框。根据我的代码，如果正确答案不止一个，只有一个正确答案使用绿色边框，其他正确答案使用红色边框，就像错误答案一样。此外，在控制台中，当我单击右键回答时，国家名称也会出现（它应该出现），但名称下方也会出现“错误”的单词，左侧有一个小数字。我的for循环有问题吗？ 我的代码是：如何创建一个事件，当一个div或它'；s儿童<；p/>；单击的元素在vanilla Javascript中围绕整个div创建边框,javascript,html,for-loop,click,addeventlistener,Javascript,Html,For Loop,Click,Addeventlistener,我有一个容器，并在其中动态创建div。每个创建的div内部都有2个p元素。如何在每个创建的div中添加onclick函数，以便在单击div或p元素时，绿色边框仅在整个div周围显示。因为现在如果单击p，边框在p周围，而不是在div周围。我必须单击div才能获得正确的边框 此外，当单击一个div时，程序会迭代一个具有正确答案的对象数组，如果单击的div的id在arrays code3值中，我想向div添加一个绿色边框。如果出现错误，请使用红色边框。根据我的代码，如果正确答案不止一个，只有一个正确答
<body>
<div class = "game-panel">
<div id="neighbours-panel">
<div class= neighbor id='ARG'>
<p>AR(Flag symbol)</p>
<p>Argentina</p>
</div>
<div class= neighbor id='ITA'>
<p>IT(Flag symbol)</p>
<p>Italy</p>
</div>
<div class= neighbor id='GRC'>
<p>GR(Flag symbol)</p>
<p>Greece</p>
</div>
etc.
.
.
.
</div>
</div>
//An array of countries:
realNeighbours = [{ "code": "AF", "code3": "AFG", "name": "Afghanistan", "number": "004" }, { "code": "DZ", "code3": "DZA", "name": "Algeria", "number": "012" }, { "code": "AS", "code3": "ASM", "name": "American Samoa", "number": "016" }, { "code": "AD", "code3": "AND", "name": "Andorra", "number": "020" },]
//JS code:
x = document.getElementById("game-panel").childNodes;
x[x.length-1].addEventListener("click", function (e) {
for(i=0; i<realNeighbours.length; i++){
if(realNeighbours[i]['code3'].includes(e.target.id)) {
e.target.style.border = '1px solid green';
console.log(this.innerHTML);
} else {
e.target.style.border = '1px solid red';
console.log('wrong')
}
}
});
AR（旗帜符号）
阿根廷
它（旗帜符号）
意大利
GR（旗帜符号）
希腊
等
.
.
.
//一系列国家：
RealNeights=[{“代码”：“AF”，“代码3”：“AFG”，“名称”：“阿富汗”，“编号”：“004”}，{“代码”：“DZ”，“代码3”：“DZA”，“名称”：“阿尔及利亚”，“编号”：“012”}，{“代码”：“AS”，“代码3”：“ASM”，“名称”：“美属萨摩亚”，“编号”：“016”}，{“代码”：“AD”，“代码3”：“和”，“名称”：“安道尔”，“编号”：“020”}，]
//JS代码：
x=document.getElementById（“游戏面板”）.childNodes；
x[x.length-1]。添加了“单击”，函数（e）{
对于（i=0；i您不需要在每个添加的div上创建eventListener，请使用事件委派技术
const
DomParser=新的DomParser（）
，选中了（DomParser.parseFromString（str，'text/HTML'））.body.firstChild
，边境国家=
[{代码：“AR”，代码3：“ARG”，名称：“阿根廷”}
，{代码：'AF'，代码3:'AFG'，名称：'Afghanistan'}
，{代码：'IT'，代码3:'ITA'，名称：'Italy'}
，{代码：'GR'，代码3:'GRC'，名称：'Greece'}
]
，realnights=
[{代码：'AF'，代码3:'AFG'，名称：'Afghanistan'，编号：'004'}
，{代码：'DZ'，代码3:'DZA'，姓名：'阿尔及利亚'，编号：'012'}
，{代码：'AS'，代码3:'ASM'，名称：'American萨摩亚'，编号：'016'}
，{代码：'AD'，代码3:'AND'，名称：'ANDORR'，编号：'020'}
]
，gamePanel=document.querySelector（'div#game panel'））
，score=（函数（）//iLife clossure
{
让divCount=0
，值=0
;
常数
计数器=document.querySelector（“#score>span”）
，正确=+5
，错=-3
，obj=
{更新（bool）
{
值+=（布尔？正确：错误）*divCount
counter.textContent=值
}
，divAdded（）{divCount++}
}
;
counter.textContent=value//init
返回obj
})()
;
gamePanel.onclick=evt=>
{
如果（！evt.target.matches（'div.neighbor，div.neighbor>p'））返回
设xDiv=evt.target.nexist（'div.neighbor'））
，test_c3=realnights.some（el=>el.code3==xDiv.dataset.code3）
分数更新（测试c3）
xDiv.classList.add（（测试c3？'cl_green'：'cl_red'））
}
//生成div---（使用DOMParser（）：个人首选项）
borderCountries.forEach（bc=>
{
设newDiv=`
${bc.code}（标志符号）
${bc.name}
`
gamePanel.appendChild（选中\uHTML（newDiv））
score.divAdded（）
})
div#游戏面板>div{边框：3px实心透明}
div#游戏面板>div.cl#u红色{边框颜色：红色；}
div#game panel>div.cl_green{边框颜色：绿色；}
得分
@mat1再次升级。iLife Close应该是另一个问题，请参见这行：score.divAdded（）
[是的，我在iLife Close中创建了score对象…]是的，您已经帮了很多忙，非常感谢您抽出时间。