如何实现点击按钮显示已设置display:none的对应国家国旗图片

你现在的问题在于，flagdisplay函数里直接重新创建img标签完全没必要，而且之前用类或id的思路没找对正确的元素关联方式。正确的做法是让按钮点击时，找到它所在的同一个div里的那张国旗图片，而不是通过src或者全局选择器去查找。

修改方案很简单，分两步：

1. 修改按钮的onclick事件，把当前按钮元素传进函数：
   把原来的onclick="flagdisplay('${data.flags.png}')"改成onclick="flagdisplay(this)"，this在这里就代表点击的这个按钮本身。

2. 重写flagdisplay函数，通过按钮找到对应的img元素并修改样式：
   利用DOM的元素关系，按钮和img是同级元素，都在同一个父div里，我们可以通过parentElement找到父div，再在里面找img标签，然后修改它的display属性为block。

修改后的完整代码：

fetch('https://restcountries.com/v3.1/all')
    .then(response => response.json())
    .then(json => display(json));

function display(datas) {
    let parent = document.getElementById("parent");

    datas.forEach(data => {
        let div = document.createElement('div');
        div.classList.add('list');

        div.innerHTML = `
        <li>country Name: ${data.name.common}</li>
        <li>country Continents: ${data.continents[0]}</li>
        <li>Total area: ${data.area}</li>
        <img src="${data.flags.png}" alt="${data.name.common} flag" style="display: none">
        <button onclick="flagdisplay(this)">Show Flag</button> `
         parent.appendChild(div);
     })
}
function flagdisplay(btn) {
    // 找到按钮所在的父div
    const parentDiv = btn.parentElement;
    // 在父div里找到img元素
    const flagImg = parentDiv.querySelector('img');
    // 修改display属性
    flagImg.style.display = 'block';
}

额外优化点：

• 给img加了有意义的alt属性，提升可访问性
• 把按钮文字改成更清晰的Show Flag
• 修正了代码里的拼写错误（Nmae→Name，arae→area）

这样每次点击按钮，只会操作它自己所在卡片里的国旗图片，不会影响其他国家的。

内容的提问来源于stack exchange，提问作者Nafiz Imtiaz