Fatal编程技术网
  • javascript/
  • Javascript Can'；t根据下一页中的信息获取按钮以更改颜色

Javascript Can'；t根据下一页中的信息获取按钮以更改颜色

javascript html

Javascript Can'；t根据下一页中的信息获取按钮以更改颜色,javascript,html,Javascript,Html,我试图根据sessionStorage项是否标记为true来更改按钮的背景色。在下一页，厨房页面上，当选中所有按钮时，sessionStorage项变为true，因此当您返回“主页”时，厨房现在标记为绿色而不是红色。这是表演的结束。我认为您可以使用jQuery，但我真的不知道如何使用它 家 函数加载器（）{ var form=document.getElementById（“myForm”）； //这里的某个地方出错了 对于（var i=0；i每次加载主页时，您都会使用这些内联脚本将值设置为fa

我试图根据sessionStorage项是否标记为true来更改按钮的背景色。在下一页，厨房页面上，当选中所有按钮时，sessionStorage项变为true，因此当您返回“主页”时，厨房现在标记为绿色而不是红色。这是表演的结束。我认为您可以使用jQuery，但我真的不知道如何使用它

家

函数加载器（）{
var form=document.getElementById（“myForm”）；
//这里的某个地方出错了

对于（var i=0；i每次加载主页时，您都会使用这些内联脚本将值设置为false。删除
sessionStorage.setItem（“livingroom”、“false”）；
调用home.html，看起来一切都正常。
请同时提供html，因为问题可能在于ID问题！谢谢你的建议。如果需要添加任何其他内容，请告诉我。附带说明：url的目标是各自的主页->厨房->主页。就是这样！谢谢你提供html。Li我说过，这可能是ID的问题，确实如此。您正在使用
document.getElementById（）
但是你的元素都没有ID，因此背景颜色不会改变。好吧，我有点困惑。所以我在家中的元素有ID，基于它们是否是厨房、生活等的一部分。我应该在哪里添加ID？我的错，我写错了。我的意思是这些值与ID不同，因此使用
表格[i].value
无法获取正确的元素。例如，value
客厅
无法与ID
客厅一起工作，所以我尝试了这个方法，但似乎不起作用。我做了一些测试，在我注意到加载程序函数没有加载我的For循环后。你认为它是根在那里还是我缺少了什么g其他吗？很抱歉延迟了ResponseEnverMind，你的方法成功了！非常感谢。还有一件事需要注意，我不确定如何以我最不需要的形式获取元素的id。就像我是你的循环，你在其中访问值，而不是
。value
它是
。id


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

        //error somewhere in here
        for(var i=0;i<form.length;i++){
            if(sessionStorage.getItem(form.elements[i].value) == "true"){
                document.getElementById(form.elements[i].value).style.backgroundColor = "green";
                return true;
            }else{
                document.getElementById(form.elements[i].value).style.backgroundColor = "red";
                return false;
            }
        }
    }

    function initial(){
        if (localStorage.getItem("hasCodeRunBefore") === null) {
                var form = document.forms[0];
                var tot = document.forms[0].length;
                var i;
                for(var i = 0; i < tot ; ++i){
            document.getElementById(form.elements[i].value).style.backgroundColor = "red";
                }
            localStorage.setItem("hasCodeRunBefore", true);
        }
    }

    function start(){
        initial();
        loader();
    }



<body onload="start()">
<header align=center>Home Screen</header>
<p align=center id="result"></p>
<script>
    document.getElementById("result").innerHTML = sessionStorage.getItem("currentAddress");
</script>

<ul align=center>
    <form id="myForm">
        <li>        
                <input type="button" name="area" id="livingroom" value="Living Room" ><br><br>
                <script type="text/javascript">
                        sessionStorage.setItem("livingroom","false");
                        document.getElementById("livingroom").onclick = function () {
                        location.href = "url";
                    };
                </script>
        </li>
        <li>        
                <input type="button" name="area" id="kitchen" value="Kitchen"><br><br>  
                <script type="text/javascript">
                        sessionStorage.setItem("kitchen","false");
                        document.getElementById("kitchen").onclick = function () {
                        location.href = "url";
                    };
                </script>
        </li>
        <li>
                <input type="button" name="area" id="bathroom" value="Bathroom" ><br><br>   
                <script type="text/javascript">
                        sessionStorage.setItem("bathroom","false");
                        document.getElementById("bathroom").onclick = function () {
                        location.href = "url";
                    };
                </script>
        </li>
        <li>        
                <input type="button" name="area" id="dining" value="Dining" ><br><br>   
                <script type="text/javascript">
                        sessionStorage.setItem("dining","false");
                        document.getElementById("dining").onclick = function () {
                        location.href = "url";
                    };
                </script>
        </li>
        <li>        
                <input type="button" name="area" id="bedroom1" value="Bedroom 1" ><br><br>
                <script type="text/javascript">
                        sessionStorage.setItem("bedroom1","false");
                        document.getElementById("bedroom1").onclick = function () {
                        location.href = "url";
                    };
                </script>       
        </li>
    </form>
</ul>



function checkTasks(form){
        var count = 0;
        for(var i=0;i<form.task.length;i++){
            if(form.task[i].checked){
                count++;
            }
        }

        if(count == form.task.length){
            sessionStorage.setItem("kitchen","true");
            window.open("url");
        }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.");
        }
    }   



<body>
<header align=center>Kitchen To Do List</header>
<form name="todolist" >
    <div id="button">
        <label>
            <input type="checkbox" name="task" value="1" ><p>Microwave</p>
        </label>
    </div>
    <div id="button">
        <label>
            <input type="checkbox" name="task" value="1"><p>Coffee Maker</p>
        </label>
    </div>
    <div id="button">   
        <label>
            <input type="checkbox" name="task" value="1"><p>Oven</p>
        </label>
    </div>
    <div id="button">
        <label>
            <input type="checkbox" name="task" value="1"><p>Dishwasher</p>
        </label>
    </div>
    <div id="button">
        <label>
            <input type="checkbox" name="task" value="1"><p>Stove Top</p>
        </label>
    </div>
    <div id="button">
        <label>
            <input type="checkbox" name="task" value="1"><p>Other</p>
        </label>
    </div>

    <textarea id="other"></textarea><br><br>
    <p align=center>
        <input type="submit" name="box" id="box" value="Complete" onclick="checkTasks(this.form)">
    </p>
</form>

<div class="close">
    <form align=center action="url" target="_self">
        <input type="submit" name="back" value="Back">
    </form>
</div>