Question

好的，我正在玩javascript。我想创建一个带有“更改背景”按钮的网页，该按钮在不同颜色之间循环。所以我这样写（脚本标签从视图开始）

 var bgcolors = ["pink", "beige", "wheat", "white", "brown"];

        var i = 0;

        function cyclebg(){

            document.body.style.backgroundColor = bgcolors[i];

            i++;

            if (i > (bgcolors.length - 1))
            {
                i = 0;
            }

        }

        //other ideas:
        //-say color next to button
    </script>
    <br>
    <br>
    <button type="button"  style="background-color:red; border-color: red;" OnClick="cyclebg()">Change Background Color</button>

这很好用。然后我决定制作一个版本，并在按钮旁边显示颜色的名称。所以我补充说......

<script>document.write(bgcolors[i]);

    </script>

然而，总是写“粉红色”。看起来这个“document.write”脚本只能读取函数之外的“i”。为什么是这样？ javaSCRIPT中的所有变量都不是全局的吗？如何让它读取函数内部的“i”，以便显示背景中使用的颜色名称？

Answer 1

单击按钮时向目标添加元素将是您尝试完成任务的最简单方法。

HTML

<button type="button"  style="background-color:red; border-color: red;" OnClick="cyclebg()">Change Background Color</button><span id="color-name"></span>

JS

var bgcolors = ["pink", "beige", "wheat", "white", "brown"];

var i = 0;

function cyclebg(){
    document.body.style.backgroundColor = bgcolors[i];
    document.getElementById("color-name").innerHTML = bgcolors[i]
    i++;                        
    if (i > (bgcolors.length - 1))
       {
           i = 0;
       }
}

https://jsfiddle.net/rt7t1fws/

Answer 2

您可以通过返回更改颜色的函数，在bgcolors和i上使用闭包。然后使用span标记作为颜色名称。

＆＃13;

var cyclebg = function() {
    var bgcolors = ["pink", "beige", "wheat", "white", "brown"],
        i = 0;
      
    return function() {
        document.body.style.backgroundColor = bgcolors[i];
        document.getElementById('color').innerHTML = bgcolors[i];
        i++;
        i %= bgcolors.length;
    };
}();

＆＃13;

<br><br><button type="button" style="background-color:red; border-color: red;" onclick="cyclebg()">Change Background Color</button> <span id="color"></span>

＆＃13;

Answer 3

似乎这个“document.write”脚本只能读取什么“我”在功能之外。这是为什么？

当执行document.wite时，i的值为0.根据您的代码，每次调用document.write(bgcolors[i]);时，您似乎没有编写/执行cyclebg()代码。

javaSCRIPT中的所有变量都不是全局的吗？

在函数外声明的变量变为GLOBAL

如何让它读取函数内部的“i”，以便它显示背景中使用的颜色名称？

参见@Jach M的回答。在cyclebg()函数中编写代码来执行此操作。

在函数之外使用变量'i'

3 个答案: