Question

我是JavaScript的新手，我基本上想弄清楚如何使用一个按钮来改变点击时的背景颜色。目前我可以使用三个三个单独的按钮来完成它，但我不知道如何只使用一个按钮。

点击后，我希望选择列表中的下一个颜色。

我对JQuery一无所知，所以如果代码不在JQuery中，我将不胜感激。

这就是我现在所拥有的：

typedef struct iNode
{
    int mode;
    int id;
    int size;
    int pointers[NUM_POINTERS];
} iNode;


typedef struct superBlock
{
    int magic_number;
    int block_size;
    int num_blocks;
    int num_inodes;
    iNode *root;
    iNode jNodes[20];
} superBlock;

Answer 1

const changeColor = document.getElementById('changeColor'),
      colors      = ['red', 'green', 'blue'];
let   colorIndex  = 0;

changeColor.addEventListener('click', () => {
  document.body.style.backgroundColor = colors[colorIndex];      
  colorIndex = (colorIndex + 1) % colors.length
});

<button id="changeColor">changeColor</button>

Answer 2

var colors = ["red", "blue", "green", "yellow"],   // the color choices
    index = 0;                                     // index of the current color
    
document.getElementById("colorify").onclick = function() {
  document.body.style.background = colors[index];  // set the color of body to the current color
  index = (index + 1) % colors.length;             // increment index to point to the next color (if it goes beyond the length of the coices array get it back to 0 using the modulo %)
}

<button id="colorify">Change color</button>

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="changeColor()">click me</button>
    <script>
        var place =0;
        function changeColor() {
            // your color list
            var colorList = ["red","green","blue"];
            // set the color
            document.body.style.backgroundColor = colorList[place]; 
            place++;
            // if place is greater than the list size, reset
            if (place ===colorList.length) place=0; 
        }
    </script>
</body>
</html>

如何使用一个按钮多次更改背景颜色（仅限JavaScript）？

3 个答案: