所以我目前正在做一个小项目网站，基本上是在按下按钮时改变背景颜色。但我也在尝试实现一个“后退”按钮，以便在我创建的颜色数组中向后退，所有正在生成的颜色代码都将保存在该数组中。但是正如您在测试项目时看到的那样，后退按钮不起作用，我知道那是因为在调用“prevColor”函数时没有保存“i”变量。
function prevColor() {
(i == randomColors.length ? bodyStyle.backgroundColor = randomColors[i-2] : bodyStyle.backgroundColor = randomColors[i-1])
};
这是我无法解决的部分，但请随时通过下面提供的链接或通过代码片段(单击打开)在 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"> ◄ </button>
<button id="change">Click for a surprise!!!</button>
</div>
<script src="toggle.js"></script>
</body>
</html>最佳答案
首先我想澄清一下 UI
<p id="color"></p>
<p id="current"></p>
<button id="back"> ◀ </button>
<button id="new">Click for a surprise!!!</button>
<button id="next"> ▶ </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();
关于javascript - 创建一个后退按钮以在数组中使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51771494/