如何在JavaScript+RestCountries API中给人口最多国家加彩色边框

我正在做一个学校项目，使用JavaScript和RestCountries API实现按语言搜索国家的功能：输入语言后展示对应国家，语言不存在时显示错误提示。现在需要给搜索结果中人口最多的国家对应的div添加彩色边框以突出显示，请问该如何实现？

原始代码 #

JavaScript代码 #

const countries = document.querySelector('.countries')
const lang = document.getElementById('search').value
const btn = document.getElementById('btn')


async function getCountries(){
    countries.innerText = ''
    const search = document.querySelector('.search').value;
    const response = await fetch(`https://restcountries.com/v3.1/lang/${search}`,{
        method: "GET",
    });
    
    const data = await response.json();

    if(!response.ok){
        countries.innerText += 'Language doesnt excist. Search again!'
      
    }else {
        data.forEach(api=> {
            showCountry(api)
        })  
    }

    // 此处代码存在错误
    ??const maxPopulation = Math.max(data?.population)
    maxPopulation.forEach(pop =>{
        pop.style.border = 'green'
    })
    }
 

function showCountry(data){
    const country = document.createElement('div')
    country.classList.add('country')
    countries.classList.add('countriesClass')
    country.innerHTML =
    `<div class="country-img">
        <img src="${data?.flags?.png}" alt="">
    </div>
    <div class="country-details">
        <h5 class="countryName">${data?.name?.common}</h5>
        <p><strong>Population:</strong>${data?.population}</p>
        <p><strong>SubRegion:</strong>${data?.subregion}</p>
        <p><strong>Capital:</strong>${data?.capital}</p>
    </div>`
    
    countries.appendChild(country)
     
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Countries</title>
</head>
<body>
    <div class="container">
        <h1>Search country by language!</h1>
    </div>
    <div class="container">
        <div class="controls">
            <i class="bx bx-search"></i>
            <input type="text" placeholder="search by language.." id="search" class="search">
        </div>
        <button id="btn" onclick="getCountries()">Search Country</button>
    </div>
    <div class="countries">
              
    </div>
    <script src="script.js"></script>
</body>
</html>

解决方案 #

你原代码中计算最大人口的逻辑有误：Math.max(data?.population)无法正确获取最大值，因为data是对象数组，需要先提取所有国家的人口值再计算；且maxPopulation是数值而非数组，不能用forEach遍历。

按以下步骤修改即可实现需求：

1. 成功获取国家列表后，先计算出最大人口数；
2. 创建国家元素时，判断当前国家人口是否等于最大值，若是则添加彩色边框；
3. 推荐用CSS类控制样式，比内联样式更易维护。

修改后的JavaScript代码 #

const countries = document.querySelector('.countries')
const btn = document.getElementById('btn')

async function getCountries(){
    countries.innerText = ''
    const search = document.querySelector('.search').value;
    const response = await fetch(`https://restcountries.com/v3.1/lang/${search}`,{
        method: "GET",
    });
    
    const data = await response.json();

    if(!response.ok){
        countries.innerText += '语言不存在，请重新搜索！'
    }else {
        // 提取所有国家人口并计算最大值
        const maxPopulation = Math.max(...data.map(country => country.population))
        // 遍历创建元素时传入是否为人口最多国家的标识
        data.forEach(country => {
            showCountry(country, country.population === maxPopulation)
        })  
    }
}

function showCountry(data, isMaxPopulation){
    const country = document.createElement('div')
    country.classList.add('country')
    // 给人口最多的国家添加样式
    if(isMaxPopulation){
        // 方式一：内联样式
        country.style.border = '3px solid #2ecc71'
        // 方式二：添加CSS类（需在style.css中定义）
        // country.classList.add('max-population')
    }
    countries.classList.add('countriesClass')
    country.innerHTML =
    `<div class="country-img">
        <img src="${data?.flags?.png}" alt="${data?.name?.common}国旗">
    </div>
    <div class="country-details">
        <h5 class="countryName">${data?.name?.common}</h5>
        <p><strong>人口:</strong>${data?.population.toLocaleString()}</p>
        <p><strong>次区域:</strong>${data?.subregion}</p>
        <p><strong>首都:</strong>${data?.capital?.[0] || '无'}</p>
    </div>`
    
    countries.appendChild(country)
}

额外优化（可选） #

如果用CSS类控制样式，在style.css中添加：

.max-population {
    border: 3px solid #2ecc71;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

同时把showCountry中的内联样式替换为country.classList.add('max-population')即可。

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