Javascript 从会话存储读取时如何更改多个按钮的背景

我试图让这一页上的所有按钮从中性开始，然后在页面加载时变为红色，最后在下一页的检查表完成时变为绿色。我似乎只能让第一个按钮起作用，但其他按钮什么也没做。有什么建议吗？所有其他尝试都在注释中

    function initial(){
        if (localStorage.getItem("run") == null) {

            /*  var form = document.getElementById("myForm");
                var idObject = {};

                idObject[form.elements[0].id].("false");
                for(var i = 1; i < form.length ; i++){
                     idObject[form.elements[i].id].push("false");
                }   
                sessionStorage.setItem("savedIds",JSON.stringify(idObject)); */

            /*  var ids = [ {area:"kitchen",done:"true"},
                            {area:"livingroom",done:"false"},
                            {area:"bathroom",done:"false"},
                            {area:"dining",done:"false"},
                            {area:"bredroom",done:"false"}]; */

            /*  var ids = {"kitchen":false,
                            "livingroom":true,
                            "bathroom":false,
                            "dining":false,
                            "bedroom":false};   */

                var ids = [false,false,false,false,false];          
                sessionStorage.setItem("savedIds",JSON.stringify(ids)); 

            localStorage.setItem("run", true);
        }
    }

        function loader(){
        var form = document.getElementById("myForm");
        var obj = JSON.parse(sessionStorage.getItem("savedIds"));

        for(var i = 0;i < 5;i++){
            if(obj[i] == true){
                document.getElementById(form.elements[i].id).style.backgroundColor = "green";
                return false;
            }else{
                document.getElementById(form.elements[i].id).style.backgroundColor = "red";
                return false;
            }
        }
    }

函数初始值（）{
if（localStorage.getItem（“run”）==null）{
/*var form=document.getElementById（“myForm”）；
var idObject={}；
idObject[form.elements[0].id]。（“false”）；
对于（变量i=1；i

所以我在论坛上提到了这一点，但我还没有完全解决这个问题。我一个人花了好几天的时间在这件事上，真让我受不了。任何建议都很好

需要注意的是，这是检查表页面上的功能，用于读取检查表并将按钮变为绿色。还有一个问题是，由于“VM915:1 Uncaught SyntaxError:Unexpected token，在JSON中的位置4”，颜色不会更改为绿色

功能检查任务（表单）{
var计数=0；
对于（var i=0；i来说，实现这一点的最佳方法（IMO）是最大化CSS的功能

例如：

CSS

将class
myBtn
添加到要更改其颜色的所有按钮。然后在javascript中，只需将class
加载的
和class
处理的
添加到document.body，即可更改所有按钮的颜色。
函数初始（）{
function initial(){
        if (localStorage.getItem("unitrun") === null) {
            var form = document.getElementById("myForm");
            var tot = form.length;

            for(var i = 0; i < tot ; i++){
                sessionStorage.setItem(form.elements[i].id,"false");
            }
        localStorage.setItem("unitrun", true);
        }
    }

    function loader(){
        var form = document.getElementById("myForm");
        var tot = form.length;

        for(var i = 0; i < tot ; i++){
            if(sessionStorage.getItem(form.elements[i].id) === "true"){
                document.getElementById(form.elements[i].id).disabled = true;
            }else{
                document.getElementById(form.elements[i].id).disabled = false;
            }
        }
    }

function checkTasks(form){
        var count = 0;
        var list = document.getElementById("tasks").getElementsByTagName("li");
        var tot = list.length;
        for(var i = 0;i < tot;i++){
            if(form.task[i].checked){
                count++;
            }
        }

        if(count == tot){
            sessionStorage.setItem("kitchen","true");
            window.open("http://localhost:8080/Project/home.html","_self");
        }else{
            alert("You have not completed all the tasks! Please check all the boxes to indicate you have completed the tasks. If there is an issue, write it in the other box.");
        }
    }   

if（localStorage.getItem（“unitrun”）==null）{
var form=document.getElementById（“myForm”）；
var tot=形式长度；
对于（变量i=0；i
您好，看起来您已经将android java与javascript结合在一起了。它们都是不同的。请看这里开始使用javascript。哦，我刚刚意识到我在那里留下了一些我正在尝试的代码。现在应该消失了！您的代码的问题在于架构。您需要管理按钮的状态，更新该状态，然后进行操作您的CSS基于来自辅助页面的状态。看起来您正在使用persistent
localStorage
-您可以将其用于管理状态，但这并不理想。此外，为什么要在数组上使用JSON.stringify？它不是一个对象，然后您在数组字符串上执行JSON.parse，这就是为什么会出现错误的原因。好的，那么我应该在一个函数中管理所有的按钮吗？也就是说，如果我将所有的true和false更改为true和false，它可以工作吗？我想说的几乎就是这个，但你的答案更简洁。我建议添加javascript来完成这项工作，或者说jQuery。好的，我如何使用jQuery来解决这个问题？还有，加载和处理的逻辑如何工作？你是不是建议我继续像以前那样存储数据，然后在我使用c时更改所有的加载和处理？jquery不需要这样做。你不需要一个完整的框架来实现这样的事情。
button.myBtn {
  color: initial;
}

body.loaded button.myBtn {
  color: red;
}

body.processed button.myBtn {
  color: green;
}

function initial(){
        if (localStorage.getItem("unitrun") === null) {
            var form = document.getElementById("myForm");
            var tot = form.length;

            for(var i = 0; i < tot ; i++){
                sessionStorage.setItem(form.elements[i].id,"false");
            }
        localStorage.setItem("unitrun", true);
        }
    }

    function loader(){
        var form = document.getElementById("myForm");
        var tot = form.length;

        for(var i = 0; i < tot ; i++){
            if(sessionStorage.getItem(form.elements[i].id) === "true"){
                document.getElementById(form.elements[i].id).disabled = true;
            }else{
                document.getElementById(form.elements[i].id).disabled = false;
            }
        }
    }

function checkTasks(form){
        var count = 0;
        var list = document.getElementById("tasks").getElementsByTagName("li");
        var tot = list.length;
        for(var i = 0;i < tot;i++){
            if(form.task[i].checked){
                count++;
            }
        }

        if(count == tot){
            sessionStorage.setItem("kitchen","true");
            window.open("http://localhost:8080/Project/home.html","_self");
        }else{
            alert("You have not completed all the tasks! Please check all the boxes to indicate you have completed the tasks. If there is an issue, write it in the other box.");
        }
    }