在 JavaScript 中单击时在动态创建的 div 中创建边框

Question

求助！！！我在 JavaScript 中做了一个带有旗帜的游戏测验作为练习。在一个容器中，我动态创建 divs 并选择国家名称。单击 div 时，程序会迭代具有正确答案的对象数组，如果单击的 div 的 ID 在那里，我想向 div 添加一个绿色边框。如果错误的红色边框。我有这个代码：

x = document.getElementById("container").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 = 'green';
            console.log(this.innerHTML);
        }else{
            e.target.style.border = 'red';
            console.log('wrong')
        }
    }
});

当我点击 div 时，错误或正确答案都不会显示边框，在控制台中，当我点击“错误”国家时，会显示错误消息，但当我点击正确国家时，会显示名称（应该如此），但也会再次显示 'Wrong' 并在左侧显示一些数字。

Answer 1

您的边框可能是 0px 宽度。试试这样设置：

e.target.style.border = '1px solid green'

Answer 2

你的 if/else 每个元素都是运行，所以对于每个错误的元素，它都会进入你的 else 语句。

您可以使用 Array.prototype.find():

// ISO-3166 country codes collection https://www.iso.org/obp/ui#iso:pub:PUB500001:en
const matches = [
    // { "code": "AF", "code3": "AFG", "name": "Afghanistan", "number": "004" },
    // { "code": "AL", "code3": "ALB", "name": "Albania", "number": "008" },
    // { "code": "DZ", "code3": "DZA", "name": "Algeria", "number": "012" },
    // { "code": "HU", "code3": "HUN", "name": "Hungary", "number": "348" },
    { "code": "LV", "code3": "LVA", "name": "Latvia", "number": "428" },
    { "code": "LY", "code3": "LBY", "name": "Libya", "number": "434" },
    { "code": "PT", "code3": "PRT", "name": "Portugal", "number": "620" },
    { "code": "TH", "code3": "THA", "name": "Thailand", "number": "764" }
];

const nodes = document.getElementsByTagName("li");
[...nodes].forEach(element => {
  element.addEventListener("click", e => {
    if (matches.find(d => d["code3"] === e.target.id) !== undefined){
      e.target.style.border = "2px solid green";
    }
    else {
      e.target.style.border = "2px solid red";
    }
  });
});

li {
  margin: 5px;
  border: 2px solid white;
}

<ul>
  <li id="AFG">Afghanistan</li>
  <li id="ALB">Albania</li>
  <li id="DZA">Algeria</li>
  <li id="HUN">Hungary</li>
  <li id="LVA">Latvia</li>
  <li id="LBY">Libya</li>
  <li id="PRT">Portugal</li>
  <li id="THA">Thailand</li>
</ul>

在 JavaScript 中单击时在动态创建的 div 中创建边框

Create a border in a dynamically created div when clicked in JavaScript

javascript

for-loop

function

dynamic