创建一个后退按钮以在数组中使用答案

【问题标题】：Creating a back button to use in an array创建一个后退按钮以在数组中使用
【发布时间】：2019-01-17 04:23:47
【问题描述】：

所以我目前正在开发一个小型项目网站，该网站基本上在按下按钮时会改变背景颜色。但我也在尝试实现一个“后退”按钮，以在我创建的颜色数组中向后移动，并且将保存正在生成的所有颜色代码。但是正如您在测试项目时可能看到的那样，后退按钮并不能正常工作，我知道这是因为调用“prevColor”函数时没有保存“i”变量。

function prevColor() {
  (i == randomColors.length ? bodyStyle.backgroundColor = randomColors[i-2] : bodyStyle.backgroundColor = randomColors[i-1])
};

这部分对我来说不起作用，但请随时通过下面提供的链接或通过 sn-p（单击打开）检查 jsfiddle.net 上的整个代码。

https://jsfiddle.net/jamal000/kobmajyx/

var button = document.querySelector("#change");
var buttonStyle = button.style;
var bodyStyle = document.querySelector("body").style;
var p = document.querySelector("p");
var i = 0;
var randomColors = [];
var hue;
var HSLcolor;
var back = document.querySelector("#back");


button.addEventListener("click", randomHSL);
back.addEventListener("click", prevColor);

function randomHSL(){
  hue = Math.floor((Math.random() * 360) + 1);
  HSLcolor = `HSL(${hue}, 80%, 70%)`;

  bodyStyle.backgroundColor = HSLcolor;
  randomColors.push(`${HSLcolor}`);

  p.textContent = "Color: " + randomColors[i];
  i++;

  p.style.color, buttonStyle.borderColor = `HSL(${hue + 180}, 80%, 70%)`;
  p.style.color = buttonStyle.borderColor;
};

function prevColor(){
  (i == randomColors.length ? bodyStyle.backgroundColor = randomColors[i-2] :    bodyStyle.backgroundColor = randomColors[i-1])
};

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  transition: all 0.5s ease;
}

#change {
  height: 40.6px;
  width: 200px;
  outline: none;
  font-family: Raleway;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid darkgrey;
  border-radius: 10px;
  background-color: #f1f1f1;
  color: black;
  box-shadow: 5px 7px 40px rgba(0,0,0,0.5);
}

#change:hover {
  color: #666666;
  box-shadow: 7px 10px 40px rgba(0,0,0,0.4);
  transition: all 0.5s ease;
}

:active {
  border-color: #666666;
  transition: all 0.5s ease;
}

p {
  font-family: Raleway;
  font-weight: 500;
}

#back {
  outline: none;
  margin-right: 5px;
  background-color: inherit;
  border: 2px solid #2f2f2f;
  border-radius: 5px;
}

#back:hover {
  border-color: #aaa;
  transition: all 0.5s ease;

}

#back:active {
  transition: all 0.2s ease;
  color: #aaa;
  background-color: inherit;
}

div {
  margin-right: 38.172px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Color Toggle</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet">
  </head>
  <body>

    <p>Color: White</p>

  <div>
    <button id="back"> &#9668; </button>
    <button id="change">Click for a surprise!!!</button>
  </div>

  <script src="toggle.js"></script>
  </body>
</html>

【问题讨论】：

好吧，既然你回来了，你需要在点击时更新 i

标签： javascript arrays button colors

【解决方案1】：

首先我想澄清一下用户界面

<p id="color"></p>
<p id="current"></p>
<button id="back"> &#9664; </button>
<button id="new">Click for a surprise!!!</button>
<button id="next"> &#9654; </button>

如果我们想返回和前进，让我们有单独的按钮。还有一个惊喜按钮，它将向数组推送新颜色并将索引设置为该新颜色。

然后我会将所有 DOM 操作提取到一个方法中，我们称之为applyColor。另外，我将默认颜色值作为colors 数组的第一项。并且 index 适当地设置为 0。所以脚本应该可以将新颜色推送到colors 数组，转换颜色index 并通过applyColor() 调用更新UI。

const colors = ['white'];
let index = 0;

function applyColor() {
  const color = colors[index];
  bodyStyle.backgroundColor = color;
  colorElement.textContent = "Color: " + color;
  currentElement.textContent = (index + 1) + " / " + colors.length;
}

function generateColor() { // bound with click on "new" button
  const hue = Math.floor((Math.random() * 360) + 1);
  const HSLcolor = `HSL(${hue}, 80%, 70%)`;
  colors.push(HSLcolor);
  index = colors.length - 1;
  applyColor();
}

function prevColor(){ // bound with click on "back" button
  index -= index > 0 ? 1 : 0;
  applyColor();
}

function nextColor(){ // bound with click on "next" button
  index += index < colors.length - 1 ? 1: 0;
  applyColor();
}

applyColor();

这是更新后的演示：https://jsfiddle.net/dhilt/fz2dktxu/36/

【讨论】：

感谢您的回答，但再次与@SatyaSampathirao 相同，下一个颜色将再次随机生成，而不是 prevColor 函数运行之前的颜色：/
@jamal000 我更新了答案。可能结果有点过分，但希望能把一些有用的想法传递给大家。

【解决方案2】：

您必须开始将您的演示功能与事件处理分离。

您的代码应该类似于https://jsfiddle.net/ryx2gn01/19/

您有 2 个操作：prevColor 和 newColor 都更改应用程序的状态并触发显示更改：
一个内部处理函数，用于生成颜色 (randomHSL)
一种显示函数，可将值设置在所需位置 (setColor)

现在你有一个色调数组 (randomColors)，当你按下“Suprise me”时，它应该向数组添加一个新的色调值并将当前索引 (variavel i) 设置为最后一种颜色 (因为你想显示你刚刚压入数组的颜色），所以i = randomColors.length - 1

按“上一个颜色”后，您有 2 个案例，您的索引已经在列表的开头 (i <= 0) 或者不是第一个 (i > 0)。在第一种情况下，您不想更改索引，但在第二种情况下，您想减少一个，因此您会在函数prevColor 上看到 if...then...else。最后，在更改状态后，您调用负责显示结果的函数setColor(i) 传递当前索引。

希望您喜欢我的解决方案，虽然它并不完美，但希望对您有所帮助

【讨论】：

【解决方案3】：

您没有更新prevColor() 方法中的i 值。试试这个：

function prevColor() {
  if (randomColors.length > 0 && i > 0) {
    i--;
    bodyStyle.backgroundColor = randomColors[i]
    console.log(randomColors, i)
  }
};

【讨论】：

我看到这是如何解决一个问题的，我有同样的想法，但我的问题是，当 prevColor 函数运行并且我继续使用数组变化的 newColor 函数时；首先它的[随机颜色 1，随机颜色 2，随机颜色 3（当前）]（从随机颜色 3 返回到 RC 2）[随机颜色 1，随机颜色 2（当前）]，现在如果我继续生成颜色RC 3 不会相同，因为生成了一个新的。这没什么大不了的，但我只是对如何解决它感兴趣:) 无论如何非常感谢您
@jamal000 您可以使用 2 个不同的索引 - i 用于添加颜色（只执行 i++）和另一个索引 j 来跟踪当前颜色（您可以执行 j-- for后退和 j++ 前进）

【解决方案4】：

请检查链接。我已经通过声明变量更新了您的代码。

var HSLcolor;
var back = document.querySelector("#back");

> var randomColors = [];var i =0;

https://jsfiddle.net/kobmajyx/6/

【讨论】：

这不能解决问题吗？它有什么帮助
感谢您的贡献，但我不明白这如何解决我的问题
贾马尔，我从你的问题中得出的结论是后退按钮不起作用。如果正确，请查看我添加的链接。
嗯，它确实解决了我的问题，但是您的更新只能返回一种颜色，如果您返回然后按下“新颜色按钮”，则会生成新颜色而不是那个颜色使用回去之前就在那里。无论如何，谢谢你，我找到了解决方案:)