求助：JavaScript读取txt拼接文件名后加载HTML页面失败

代码错误点及修正： #

• 拼写错误：respones.text() 应为 weekFile.text()，变量名拼写错误导致无法读取文件内容。
• HTML内容插入方式错误：insertAdjacentText 会把HTML代码当作纯文本显示，需换成 insertAdjacentHTML 才能正确解析渲染HTML标签。
• 未处理文本空白：Current-Week.txt 的内容可能包含换行、空格等无效字符，需用trim()清理，避免拼接出带空白的无效文件名。
• 缺少错误处理：fetch请求可能因文件不存在、跨域等失败，添加try/catch捕获异常，便于排查问题。

修正后的完整代码： #

<script>
async function loadHtml() {
    try {
        // 读取周数文件并清理多余空白
        const weekFile = await fetch("Current-Week.txt")
        const weekNbr = await weekFile.text().then(text => text.trim())

        // 拼接目标HTML文件名
        const fileName = `Standings-Week${weekNbr}.htm`
        const response = await fetch(fileName)

        // 检查请求是否成功
        if (!response.ok) {
            throw new Error(`无法加载文件：${fileName}，状态码：${response.status}`)
        }

        // 将HTML内容插入页面指定元素
        const htmlContent = await response.text()
        document.getElementById('elementID').insertAdjacentHTML('beforeend', htmlContent)
    } catch (error) {
        console.error('加载出错：', error)
        // 可选：给用户显示错误提示
        document.getElementById('elementID').textContent = `加载失败：${error.message}`
    }
}

loadHtml()
</script>

<div id='elementID'></div>

额外注意事项： #

• 确保Current-Week.txt仅包含纯数字（如"3"），无任何多余字符。
• 确保目标HTML文件（如Standings-Week3.htm）与当前页面在同一域名下，避免跨域请求被浏览器拦截。
• 可通过浏览器控制台（F12）查看错误日志，快速定位问题。

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