Javascript “上一步”按钮不工作_Javascript_Arrays

Javascript “上一步”按钮不工作

javascript arrays

Javascript “上一步”按钮不工作,javascript,arrays,Javascript,Arrays,大家好，我已经创建了这段代码，但它没有按照我希望的方式工作我在这里添加了一些颜色，我希望在单击“下一步”按钮后，它们一个接一个地出现，“下一步”按钮正常工作，但当我按下“上一步”按钮时，它会添加+1，然后再添加-1希望您理解我的问题非常感谢。它只是javascript、html和css <!DOCTYPE html> <html> <head> <title></title> <sty

大家好，我已经创建了这段代码，但它没有按照我希望的方式工作我在这里添加了一些颜色，我希望在单击“下一步”按钮后，它们一个接一个地出现，“下一步”按钮正常工作，但当我按下“上一步”按钮时，它会添加+1，然后再添加-1希望您理解我的问题
非常感谢。它只是javascript、html和css

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    <style type="text/css">

    #box{width: 500px; height: 400px; background: #CCC;}


    </style>

    </head>
    <body>
    <div id="box"></div>
    <input type="button" value="NEXT" onclick="changecolor()">
    <input type="button" value="PREVIOUS" onclick="prevcolor()">
    <script type="text/javascript">
        var boxcolor=["pink","blue","orange","magenta"];
        var i=0;

        function changecolor(){
            var div=document.getElementById('box');
            div.style.background=boxcolor[i];
            i++;
            if(i==boxcolor.length){
                i=0;
            }
        }
    function prevcolor(){

            var div=document.getElementById('box');
            div.style.background=boxcolor[i];
            i--;
        if(i==boxcolor.length){

                i--;
            }
    }





    </script>





    </body>
    </html>


#方框{宽度：500px；高度：400px；背景：#CCC；}
var boxcolor=[“粉色”、“蓝色”、“橙色”、“洋红”]；
var i=0；
函数changecolor（）{
var div=document.getElementById（'box'）；
div.style.background=boxcolor[i]；
i++；
if（i==boxcolor.length）{
i=0；
}
}
函数prevcolor（）{
var div=document.getElementById（'box'）；
div.style.background=boxcolor[i]；
我--；
if（i==boxcolor.length）{
我--；
}
}

首先设置颜色，然后才递增/递减

：

        div.style.background=boxcolor[i];
        i--;

所以当你有了这个序列：

i=0，颜色=灰色（尚未设置）
单击下一步
颜色=粉红色，我变为1
单击下一步
颜色=蓝色，我变为2
单击上一步
颜色=橙色，我变为1

查看

如何始终设置为下一个颜色？因此，无论单击哪个按钮，下一个颜色都已由上一次单击确定
通过在调试器中单步执行代码，您可以轻松捕获此类问题
更新下面是一个工作代码片段，通过将增量/减量与颜色的实际变化分开来更容易理解

var-boxcolor=[“粉色”、“蓝色”、“橙色”、“洋红]； var i=0；变色（）；函数changecolor（）{ var div=document.getElementById（'box'）； div.style.background=boxcolor[i]； } 函数nextcolor（）{ i++； if（i==boxcolor.length）{ i=0； } 变色（）； } 函数prevcolor（）{ 我--；如果（i==-1）{ i=boxcolor.length-1； } 变色（）； }

#方框{宽度：200px；高度：100px；背景：CCC；}

一个可能的解决方案是：
JavaCScript：

var boxcolor=["pink","blue","orange","magenta"]; var div=document.getElementById('box'); var len = boxcolor.length; var i=0; changeColor(); function changeColor(){ div.style.background=boxcolor[i]; } function nextcolor(){ i = (i+1) % len; changeColor(); } function prevcolor(){ i = (len+(i-1)) % len; changeColor(); }

<div id="box"></div> <input type="button" value="NEXT" onclick="nextcolor()"> <input type="button" value="PREVIOUS" onclick="prevcolor()">

#box{ width: 500px; height: 400px; }
HTML：

var boxcolor=["pink","blue","orange","magenta"]; var div=document.getElementById('box'); var len = boxcolor.length; var i=0; changeColor(); function changeColor(){ div.style.background=boxcolor[i]; } function nextcolor(){ i = (i+1) % len; changeColor(); } function prevcolor(){ i = (len+(i-1)) % len; changeColor(); }

<div id="box"></div> <input type="button" value="NEXT" onclick="nextcolor()"> <input type="button" value="PREVIOUS" onclick="prevcolor()">

#box{ width: 500px; height: 400px; }

检查此链接以查看工作示例。希望有用
thanx伙计我得到了我想要的