按钮点击一次后失效，如何实现无刷新获取新国家及首都数据？

问题原因 #

当前代码的核心问题是随机索引仅生成一次：randomNr变量在页面初始化时就固定了数值，后续点击按钮不会重新生成新的随机数，导致始终显示同一个国家的信息。另外每次点击都重复请求所有国家数据，也会造成不必要的网络开销。

方案1：简单修复（直接修改点击逻辑） #

将随机数生成逻辑移到点击事件内部，同时用返回数据的长度替代硬编码的251（避免国家数量变化导致索引越界），还增加了无首都国家的兼容处理：

const btnEl = document.getElementById("btn")
var taraEl = document.getElementById("tara")
var capitalaEl = document.getElementById("capitala")
const rezultatEl = document.getElementById("rezultat")

btnEl.addEventListener("click", async function(){
    try {
        const response = await fetch("https://restcountries.com/v3.1/all");
        const data = await response.json();
        rezultatEl.style.display = "block"
        
        // 每次点击生成新的随机索引
        const randomNr = Math.floor(Math.random() * data.length);
        taraEl.innerText = data[randomNr].name.common;
        // 处理无首都的国家（部分国家没有首都字段）
        capitalaEl.innerText = data[randomNr].capital ? data[randomNr].capital[0] : "无首都";
        
    } catch (error) {
        console.log("请求出错：", error);
    }
})

方案2：性能优化（仅请求一次数据） #

页面加载时先请求所有国家数据并存储，后续点击直接从本地数据中读取，避免重复网络请求：

const btnEl = document.getElementById("btn")
var taraEl = document.getElementById("tara")
var capitalaEl = document.getElementById("capitala")
const rezultatEl = document.getElementById("rezultat")

// 存储国家数据的全局变量
let countriesData = null;

// 初始化请求国家数据
async function loadCountries() {
    try {
        const response = await fetch("https://restcountries.com/v3.1/all");
        countriesData = await response.json();
    } catch (error) {
        console.log("加载国家数据失败：", error);
    }
}

// 页面加载完成后立即获取数据
loadCountries();

btnEl.addEventListener("click", function(){
    // 数据未加载完成时给出提示
    if (!countriesData) {
        capitalaEl.innerText = "数据加载中，请稍候";
        return;
    }
    
    rezultatEl.style.display = "block"
    const randomNr = Math.floor(Math.random() * countriesData.length);
    taraEl.innerText = countriesData[randomNr].name.common;
    capitalaEl.innerText = countriesData[randomNr].capital ? countriesData[randomNr].capital[0] : "无首都";
})

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