为已保存学院加减积分时出现NaN错误的技术求助

核心问题分析 #

• 学院名称显示为0、点数为None：后端从文本文件读取数据时解析逻辑错误，未正确提取学院名与点数的键值对；前端渲染时也未正确处理后端传入的初始数据格式。
• 加减积分出现NaN：JavaScript中直接对字符串类型的点数或None转换后的字符串做算术运算，导致运算结果为NaN。

修复步骤及代码修改 #

1. 修正Flask后端数据读取逻辑 #

假设文本文件采用学院名:点数的行格式，确保读取时正确解析并转换点数为整数：

@app.route('/')
def index():
    houses = {}
    with open('house_points.txt', 'r') as f:
        for line in f:
            line = line.strip()
            if line:
                name, points = line.split(':')
                # 确保学院名去空格、点数转为整数
                houses[name.strip()] = int(points.strip())
    return render_template('index.html', houses=houses)

2. 修复前端HTML渲染逻辑 #

确保遍历后端传入的键值对，正确渲染学院名称与点数：

<div id="houses-container">
    {% for house_name, house_points in houses.items() %}
        <div class="house-card" data-house="{{ house_name }}">
            <h3>{{ house_name }}</h3>
            <p class="points">{{ house_points }}</p>
            <button class="add-btn">+10</button>
            <button class="sub-btn">-10</button>
        </div>
    {% endfor %}
</div>

3. 修正JavaScript积分运算逻辑 #

确保先将点数转为数字再运算，同时处理无效值兜底：

document.addEventListener('DOMContentLoaded', function() {
    // 绑定加积分按钮事件
    document.querySelectorAll('.add-btn').forEach(btn => {
        btn.addEventListener('click', () => updatePoints(btn, 10));
    });

    // 绑定减积分按钮事件
    document.querySelectorAll('.sub-btn').forEach(btn => {
        btn.addEventListener('click', () => updatePoints(btn, -10));
    });
});

function updatePoints(btn, delta) {
    const houseCard = btn.closest('.house-card');
    const pointsElement = houseCard.querySelector('.points');
    const houseName = houseCard.dataset.house;
    
    // 转换当前点数为整数，无效值默认设为0
    let currentPoints = parseInt(pointsElement.textContent);
    currentPoints = isNaN(currentPoints) ? 0 : currentPoints;
    
    const newPoints = currentPoints + delta;
    pointsElement.textContent = newPoints;

    // 向后端发送更新请求（可选，用于持久化数据）
    fetch('/update-points', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ house: houseName, points: newPoints }),
    });
}

4. 补充后端数据更新接口（可选，用于持久化） #

添加接口接收前端更新请求，将新点数写回文本文件：

@app.route('/update-points', methods=['POST'])
def update_points():
    data = request.get_json()
    house_name = data['house']
    new_points = data['points']
    
    # 读取现有数据
    houses = {}
    with open('house_points.txt', 'r') as f:
        for line in f:
            line = line.strip()
            if line:
                name, points = line.split(':')
                houses[name.strip()] = int(points.strip())
    
    # 更新对应学院点数
    houses[house_name] = new_points
    
    # 写回文件
    with open('house_points.txt', 'w') as f:
        for name, points in houses.items():
            f.write(f"{name}:{points}\n")
    
    return jsonify({'status': 'success'})

关键注意事项 #

• 始终确保点数在前后端为数字类型，避免字符串与数字混合运算。
• 读取文本文件时处理空行、格式错误的行，防止解析失败。
• 前端遍历后端数据时使用houses.items()获取键值对，避免索引遍历导致的名称显示错误。

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