javascript - JQuery 背景颜色操作不起作用

Question

每次单击按钮(ID =“findOut”)时，我尝试使用 JQuery 循环浏览颜色数组来更改页面的背景颜色 - 但它似乎不起作用？

HTML(按钮):

    <div class = "mainContain">

        <button id = "findOut">
            <p>Click Me!</p>
        </button>

    </div>

JS/JQuery:

 $("document").ready(function(){

    var palette = ["red", "blue", "green", "yellow", "pink", "orange"];
    var index = 0;
    var size = palette.length;

    $("#findOut").click(function(){
        document.body.style.background = pallete[index%size];
        index++;
    });

});

Answer 1

编辑:编辑问题并插入正确的代码后，您遇到的实际问题来自于将 palette 拼写为 pallete。

$("document").ready(function() {

    var palette = ["red", "blue", "green", "yellow", "pink", "orange"];
    var index = 0;
    var size = palette.length;

    $("#findOut").click(function() {
        document.body.style.background = palette[index % size];
        index++;
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContain">

    <button id="findOut">
            <p>Click Me!</p>
        </button>

</div>