javascript - 这怎么能写得更好/更简单？

Question

我正在练习我的 JavaScript 技能，想出了一个按钮的想法，它会在我每次单击时改变一系列颜色。

const button = document.querySelector('button');
const colours = ['red', 'yellow', 'green', 'blue'];
let cycle = 1;
button.style.backgroundColor = colours[0];
button.addEventListener('click', e => {

    button.style.backgroundColor = colours[cycle];
    cycle++;
    if (cycle == 4) {
        cycle = 0;
    };
});

Answer 1

您可以使用后递增和模运算符。此外，在事件回调中，您可以直接使用 e.target 而不是 button 变量:

const button = document.querySelector('button');
const colours = ['red', 'yellow', 'green', 'blue'];
let cycle = 1;
button.style.backgroundColor = colours[0];
button.addEventListener('click', e => {
    e.target.style.backgroundColor = colours[cycle++ % colours.length];
});

<button>M</button>