将图像源从一个 html 页面更新到另一个

Question

我正在 html 中创建一个记分牌，该记分牌由另一个 html 页面控制。 我使用我之前帖子的答案中提出的消息（ 在 javascript 中的子 window 上显示文本）它工作得非常好，我可以更新文本。 现在我正在尝试更改图像的来源。

main.js

const setFaute1 = (faute1) => {
    afffaute1.innerHTML = faute1;
    switch (faute1) {
        case 1:
            faute11.src = './images/FillFault.png';
            break;
        case 2:
            faute12.src = './images/FillFault.png';
            break;
        case 3:
            faute13.src = './images/FillFault.png';
            break;
        case 0:
            faute11.src = './images/EmptyFault.png';
            faute12.src = './images/EmptyFault.png';
            faute13.src = './images/EmptyFault.png';
            break;
    }
    bc.onmessage = (messageEvent) => {
        switch (messageEvent.data) {
            case 'update_mot':
                setMot(localStorage.getItem('mot'));
                break;
            case 'update_equipe1':
                setEquipe1(localStorage.getItem('equipe1'));
                break;
            case 'update_equipe2':
                setEquipe2(localStorage.getItem('equipe2'));
                break;
            case 'update_score1':
                setScore1(localStorage.getItem('score1'));
                break;
            case 'update_score2':
                setScore2(localStorage.getItem('score2'));
                break;
            case 'update_faute1':
                setFaute1(localStorage.getItem('faute1'));
                break;
            case 'update_faute2':
                setFaute2(localStorage.getItem('faute2'));
                break;
            default:
        }
    };
    btnfaute1.onclick = (e) => {
        var value = parseInt(afffaute1.innerHTML, 10);
        if (value < 3) {
            value++;
        } else {
            value = 0;
        }
        localStorage.setItem('faute1', value);
        afffaute1.innerHTML = value;
        setFaute1(value);
        bc.postMessage('update_faute1');
    };
};

它在按钮所在的页面上正确显示，但在第二页上显示不正确。 文本字段正确更新。

我不明白为什么。 有人能帮我吗？

完整代码： https://gitlab.com/roger.julien/tableau-affichage-impro/-/tree/fautes

Answer 1

我自己找到了解决方案。 localstorage 存储字符串。 我的案例是比较 integer。 我只需要将字符串转换为 integer 就可以了。