回圈顏色

我正在嘗試遍歷顏色并將 h1 的文本更改為回圈中的一種顏色

<h1>Color Change </h1>
<button id="btn">Click Here</button>

const btn = document.querySelector('#btn')

btn.addEventListener('click', () => {
    const h1 = document.querySelector('h1')
    const colors = ['red', 'yellow', 'brown', 'green', 'blue']
    for (let i = 0; i < colors.length; i  ) {
        h1.style.color = colors[i]

    }
})

它只回傳最后一種顏色，而我想遍歷所有顏色。我不知道為什么

uj5u.com熱心網友回復：

我認為您所追求的邏輯是在每次單擊時回圈顯示顏色：

const btn = document.querySelector('#btn')
const h1 = document.querySelector('h1')
const colors = ['red', 'yellow', 'brown', 'green', 'blue']
let i = 0;
btn.addEventListener('click', () => {
  h1.style.color = colors[i]; // to change the color
  h1.innerHTML = colors[i]; // to change the text
  i = (i   1) % colors.length;
})

<h1>Color Change </h1>
<button id="btn">Click Here</button>

uj5u.com熱心網友回復：

您不想在單擊按鈕時遍歷所有顏色。您應該保留當前顏色索引的計數，更新文本顏色，然后增加計數。

對于此類問題，我通常使用的技術是使用閉包，因此我們限制了使用的全域變數的數量。

const btn = document.querySelector('#btn')
const h1 = document.querySelector('h1');

btn.addEventListener('click', handleClick(), false);

const colors = ['red', 'yellow', 'brown', 'green', 'blue'];

// Closures work by returning a function from
// the function that is called which maintains
// a copy of its local lexical envionment (in
// this case `count`). The function that is returned
// is the function assigned to the button click listener
// So, we initialise the count to zero
function handleClick(count = 0) {

  // Return a function that maintains a copy
  // of `count`
  return function () {

    // If the count is less than the length
    // of the colors array change the text colour
    // and then increase the count
    if (count < colors.length) {
      h1.style.color = colors[count];
        count;
    }
  }
}

<h1>Color Change </h1>
<button id="btn">Click Here</button>

uj5u.com熱心網友回復：

首先嘗試用簡單的人類語言概述演算法：

• 有一個標題元素、一個按鈕元素和一組預定義的顏色；
• 最初沒有選擇顏色；
• 每當單擊按鈕時：
  • 從集合中獲取下一種顏色；
  • 將下一種顏色應用于標題元素。

現在您可以將其轉換為代碼：

// there is a title element, a button element, and a predefined set of colors
const h1 = document.querySelector('h1')
const btn = document.querySelector('#btn')
const colors = ['red', 'yellow', 'brown', 'green', 'blue'];

// no color is chosen initially
let currentColorIndex = -1;

// whenever the button is clicked ...
btn.addEventListener('click', () => {
  // grab the next color from the set (if the current color is the last one, grab the first one then)
  const nextColorIndex =   currentColorIndex % colors.length;

  // apply the next color to the title element
  h1.style.color = colors[nextColorIndex];
});

<h1>Color Change </h1>
<button id="btn">Click Here</button>

uj5u.com熱心網友回復：

使用模運算子與可重復使用的生成器一起在陣列周圍無限回圈。

const h1 = document.querySelector("h1");
const btn = document.querySelector("#btn");

function* ColorLoop(color_palette) {
  
  let currentIndex = -1

  while (true) {
    let nextIndex =   currentIndex % color_palette.length;
    yield color_palette[nextIndex];
  }

}

const colors = ColorLoop(["red", "yellow", "brown", "green", "blue"]);

btn.addEventListener("click", () => {
  h1.style.color = colors.next().value;
});

<h1>Color Change </h1>
<button id="btn">Click Here</button>

有一篇關于使用模運算子無限回圈陣列的好文章。

標籤：javascript

上一篇：使用javascript單擊多個div時添加和洗掉類

下一篇：使用默認引數和useEffect防止函陣列件無限回圈