Javascript 单击时显示错误颜色的按钮

我的网站包含按钮，每个按钮都代表一种颜色，如果用户单击一个按钮，该颜色应该会改变容器div的颜色，直到最近，这一点才起作用，但现在当我单击一种颜色时，我实际得到的是我数组中保存颜色代码的下一种颜色，希望有人能帮我弄清楚为什么按钮会给我不同的颜色

指向包含我的代码的代码笔的链接

$（“文档”）.ready（函数（）{
var NOTECOLOURARY=[]；
NoteColorArray[0]=“#03CEC2”；
NoteColorArray[1]=“#ADC607”；
NoteColorArray[2]=“#ffdd00”；
NoteColor数组[3]=“f7941f”；
//循环查看NoteColorArray并为每个项目添加新按钮
对于（变量i=0，len=noteColorArray.length；i

如下更改功能设置背景颜色

function setBackgroundColour()
{
    $("#noteCreateContainer").css("background-color", noteColourArray[$(this).index() - 1] )
    return false;
}

改变

    #stickerList 
{
    position: absolute;
    height: 500px;
    width: 3rem;
    background-color:grey;
    margin-top: 0;
    display: block;
}

致：

---

将功能更改为：

  function setBackgroundColour()
  {
      $("#noteCreateContainer").css("background-color", noteColourArray[$(this).index()] );
    return false;
  }

致：

var-notecolorarray=[]；
NoteColorArray[0]=“#03CEC2”；
NoteColorArray[1]=“#ADC607”；
NoteColorArray[2]=“#ffdd00”；
NoteColor数组[3]=“f7941f”；
$（文档）.ready（函数（）{
对于（var i=0；i

小提琴：

---

请在此处添加代码。感谢您修复了它，请在我允许时将此标记为答案

    #stickerList 
{
    position: absolute;
    height: 500px;
    width: 3rem;

    margin-top: 0;
    display: block;
}

  function setBackgroundColour()
  {
      $("#noteCreateContainer").css("background-color", noteColourArray[$(this).index()] );
    return false;
  }

 function setBackgroundColour()
  {
      $("#noteCreateContainer").css("background-color", noteColourArray[$(this).index()-1] );
    return false;
  }

var noteColourArray = [];
noteColourArray[0] = "#03CEC2"; 
noteColourArray[1] = "#ADC607";
noteColourArray[2] = "#ffdd00";
noteColourArray[3] = "#f7941f";

$(document).ready(function(){
    for(var i = 0; i < noteColourArray.length; i++) {
        $('body').append('<button class="colorize">Press Me!</button>');
    }

    $('button.colorize').click(function(){
        $('body').css('backgroundColor', noteColourArray[$(this).index()]);
    });
});