提交按钮点击后无法永久变色问题求助

首先，不是for循环导致的问题，核心问题出在这两点：

• 点击按钮触发表单提交后，页面会刷新/跳转，之前用JS设置的样式会随页面重新渲染丢失，哪怕存了localStorage，刷新后也没主动读取并应用到对应按钮上。
• 你的cookie设置格式错误，document.cookie = '#7CFC00'不符合cookie键值对的规范，而且也没在页面加载时读取cookie恢复样式。

修复步骤 #

1. 修正localStorage存储逻辑 #

存储选中的按钮ID而非单纯的颜色值，这样能精准定位需要高亮的按钮，同时点击新按钮时自动重置旧按钮样式：

function change(id) {
    // 把所有按钮恢复默认背景
    document.querySelectorAll('.btn-default').forEach(btn => {
        btn.style.background = '';
    });
    // 设置当前按钮高亮
    const targetBtn = document.getElementById(id);
    targetBtn.style.background = '#7CFC00';
    // 记录选中的按钮ID到localStorage
    localStorage.setItem('selectedBtn', id);
}

2. 页面加载时恢复高亮状态 #

在页面加载完成后，读取localStorage里的选中ID，给对应按钮应用样式：

window.addEventListener('load', function() {
    const selectedId = localStorage.getItem('selectedBtn');
    if (selectedId) {
        const targetBtn = document.getElementById(selectedId);
        if (targetBtn) {
            targetBtn.style.background = '#7CFC00';
        }
    }
});

3. 优化表单提交体验（可选） #

因为每个按钮都在独立表单中，点击后会立即提交页面，用户可能看不到高亮效果。可以先阻止默认提交，设置样式后再手动提交：

<!-- 修改按钮的事件绑定 -->
<input id="{{question[foo]}}" class="btn btn-default" 
       onclick="handleSubmit(this)" 
       type="submit" value="{{question[foo]}}" name="a">

添加对应的处理函数：

function handleSubmit(btn) {
    // 先执行高亮逻辑
    change(btn.id);
    // 延迟提交，让用户看到高亮效果
    setTimeout(() => {
        btn.form.submit();
    }, 100);
}

4. 用cookie替代localStorage的方案（可选） #

如果需要用cookie存储状态，要遵守cookie的键值对格式：

// 存储cookie
function setCookie(name, value, days) {
    const expires = days ? `; max-age=${days*24*60*60}` : '';
    document.cookie = `${name}=${value}; path=/;${expires}`;
}

// 读取cookie
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    return parts.length === 2 ? parts.pop().split(';').shift() : null;
}

// 修改change函数里的存储逻辑
function change(id) {
    document.querySelectorAll('.btn-default').forEach(btn => btn.style.background = '');
    const targetBtn = document.getElementById(id);
    targetBtn.style.background = '#7CFC00';
    setCookie('selectedBtn', id, 1); // 存储1天
}

// 页面加载时读取cookie恢复样式
window.addEventListener('load', function() {
    const selectedId = getCookie('selectedBtn');
    if (selectedId) {
        const targetBtn = document.getElementById(selectedId);
        if (targetBtn) targetBtn.style.background = '#7CFC00';
    }
});

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