javascript - 在 JavaScript 中向后和向前更改颜色的问题

Question

当我尝试在我的小应用程序中更改颜色时，我遇到了这个问题。但首先，我正在尝试制作一个小应用程序来生成随机颜色并保存它们以便能够使用向后和向前按钮。

如果您想看到它的实际效果并更好地理解它，我将提供一个指向 codepen 的链接。

链接：随机颜色应用

我的问题：在生成两种颜色并向后单击后，我得到了相同的颜色（是的，我知道我正在使用一种.pop()方法来获取当前颜色），我必须单击它两次才能看到变化。

所以，我的问题。我应该使用另一种“逻辑”来获取我的颜色而不是.pop()方法.push()吗？

我会感谢所有的帮助！

标签： javascripthtmlcss

Answer 1

这就是您遇到此问题的原因！我花了一点时间才弄清楚...

当您生成新颜色时，您会立即将新颜色设置为当前颜色。之后会发生什么？您正在将其推送到backwardStack 数组！

这意味着当你变成红色时，然后变成绿色......

1. 生成 RED，设置为当前颜色，然后立即将 RED 推入向后堆栈

2. 生成绿色，设置为当前颜色，然后立即将绿色推送到向后堆栈

Backward 应该只在至少一种颜色通过后才可用，而不是在添加颜色后立即可用。意思是你应该...

  // Reverse the order of these actions!

  // Action 1
  changeColor(hexColor);
  currentColor = hexColor;
  console.log("Current color: " + currentColor);

  // Action 2
  if (currentColor) {
    backwardStack.push(currentColor);
  }

  //----------------------

  // Action 2
  if (currentColor) {
    backwardStack.push(currentColor);
  }

  // Action 1
  changeColor(hexColor);
  currentColor = hexColor;
  console.log("Current color: " + currentColor);

基本上说：

在设置当前颜色之前，我是否有当前颜色？如果是，则推送到backwardStack。如果我没有当前颜色，请不要推到 backStack 并仍然设置我当前的颜色。这意味着在第一个颜色生成时，后退按钮不应该变成可点击的。

这也是为什么每次生成颜色时都必须按两次后退按钮的原因！

希望这会有所帮助。