javascript - 需要循环遍历并分别显示每个数组值 onClick - 没有 jQuery

Question

我对 JavaScript 很陌生，正在尝试学习做一些功能性的事情。我正在尝试更熟悉数组。在此，我希望 HTML 中的 onClick 循环到每个数组值(颜色)并设置 <p> 的样式。与每一位。目前它刚刚结束，我明白为什么这样做，但我不知道如何产生我想要的结果。

我的(相关)HTML:

<p id="pg">Hi, this is a string of text.</p>
<button type="button" onclick="change()">Click Me!</button>

我的JS:

var colors = ['#3498db', '#e67e22', '#16a085', '#f39c12', '#2c3e50', '#7f8c8d', '#2980b9'];

function change()
{
    for (i = 0; i < colors.length; i++) {
        x=document.getElementById("pg"); // Find the element
        x.style.color=colors[i];          // Change the style
    }
}

我是否应该为此使用循环？感谢您的帮助。

Answer 1

您需要使用下面的全局变量，或者运行循环来查找颜色并获取下一个。这是第一种方法:

var colors = ['#3498db', '#e67e22', '#16a085', '#f39c12', '#2c3e50', '#7f8c8d', '#2980b9'];
var i = 0;

function change()
{
    x=document.getElementById("pg"); 
    x.style.color=colors[i++];
    if(i == colors.length) i = 0;
}