Flask加密货币价格页面无刷新实时更新问题求助

错误原因分析 #

报错Cannot read properties of null (reading 'innerHTML')核心源于两处逻辑错误：

1. 无差别更新所有字段：updateElement函数遍历了加密货币数据的所有属性（id、rank、symbol等），每次都替换整个<li>的内容，直接破坏DOM结构，导致后续元素定位异常。
2. 错误的内容替换逻辑：即使元素能被找到，替换整个<li>的innerHTML会丢失图片、币种符号等原有展示内容，完全不符合需求。

修复方案 #

1. 修改HTML结构，精准标记价格容器 #

为了单独更新价格而不影响其他内容，给价格部分添加带标识的<span>：

<ul>
    {% for item in result %}
        <li id="crypto-{{ item.rank }}">
            <img src="https://assets.coincap.io/assets/icons/{{ item.symbol.lower() }}@2x.png"> 
            {{ item.symbol }} 
            <span class="price" data-rank="{{ item.rank }}">{{ item.priceUsd | float | round(2) }}$</span>
        </li>
    {% endfor %}
</ul>

2. 重写JS更新逻辑 #

只针对价格字段进行精准更新，避免破坏DOM结构：

<script>
    // 每10秒请求一次最新价格数据
    setInterval(function() {
        fetch('/cryptonitetop20')
            .then(response => {
                if (!response.ok) throw new Error('请求失败');
                return response.json();
            })
            .then(data => {
                data.forEach(item => {
                    // 通过data-rank属性定位对应价格元素
                    const priceElement = document.querySelector(`.price[data-rank="${item.rank}"]`);
                    if (priceElement) {
                        // 格式化价格为两位小数
                        const newPrice = parseFloat(item.priceUsd).toFixed(2) + '$';
                        // 仅当价格变化时更新，减少不必要的DOM操作
                        if (priceElement.textContent !== newPrice) {
                            priceElement.textContent = newPrice;
                        }
                    }
                });
            })
            .catch(error => console.error('价格更新失败:', error));
    }, 10000);
</script>

3. 优化Flask路由（可选，提升效率） #

原main路由通过内部请求获取数据，可改为直接调用数据函数，减少不必要的HTTP请求：

@app.route('/main', methods=['GET','POST'])
def main():
    if 'user' in session:
        info = db.checkRegToken(session.get("user"))
        top20price = liveTicker()  # 直接调用数据获取函数
        return render_template('main.html', result = top20price ) 
    else:
        return redirect(url_for('login'))

额外说明 #

• 添加了请求错误捕获，方便排查网络或API异常问题。
• 仅在价格实际变化时更新DOM，降低浏览器渲染开销。
• 使用data-rank属性定位元素，比依赖<li>的id更灵活，避免潜在的id冲突。

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