Random Story按钮随机范围异常求助（需保留最大故事数设置）

当前问题：点击"Random Story"按钮时，前端会基于countryData中设置的actualTotalStories（如USA的1000）生成随机数，但实际文件中只有6个故事，导致频繁请求不存在的故事。需求是让随机范围自动匹配文件内的实际故事数量，同时保留actualTotalStories作为用户输入故事编号的最大上限。

修改方案 #

1. 调整前端JavaScript逻辑 #

移除前端生成随机数的代码，直接将storyNumber设为'0'传给后端，由后端根据实际文件中的故事数量生成有效随机数，同时利用countryData中的actualTotalStories限制用户输入的最大值：

修改country.js中的fetchStory函数：

function fetchStory(country, storyNumber) {
    clearStoryContainer();

    // 对用户输入的故事编号做上限校验
    if (storyNumber !== '0') {
        const num = parseInt(storyNumber);
        if (isNaN(num) || num < 1 || num > countryData[country].actualTotalStories) {
            displayErrorMessage(`请输入1到${countryData[country].actualTotalStories}之间的故事编号`);
            return;
        }
    }

    // 随机请求直接传0，由后端生成有效随机数
    const requestStoryNum = storyNumber === '0' ? '0' : storyNumber;

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'PHP/router.php?country=' + encodeURIComponent(country) + '&story=' + encodeURIComponent(requestStoryNum), true);

    // 剩余原有逻辑保持不变...
}

同时保留原有的随机按钮点击事件：

if (getRandomButton) {
    getRandomButton.addEventListener('click', function () {
        fetchStory(country, '0');
    });
}

2. 保留后端PHP的随机数生成逻辑 #

你的router.php中已经实现了根据文件实际故事数生成随机数的逻辑，无需修改：

if ($storyNumber === '0') {
    // Generate a random story number within the range of actual stories
    $storyNumber = rand(1, $actualTotalStories);
} else {
    $storyNumber = intval($storyNumber);
}

修改后效果 #

• 点击"Random Story"时，前端直接请求story=0，后端读取文件后计算实际故事数量，生成1到实际数量之间的随机数，确保请求的故事一定存在
• 用户手动输入故事编号时，前端会校验是否在1到actualTotalStories（如1000）之间，符合保留最大上限的需求
• 当文件中新增故事后，后端会自动识别实际数量，随机范围自动扩展，无需手动修改代码

内容的提问来源于stack exchange，提问作者Patrik Qvarnström