Итак, в настоящее время я работаю над небольшим веб-сайтом проекта, который в основном меняет цвет фона при нажатии кнопки. Но я также пытаюсь реализовать кнопку «назад», чтобы вернуться назад в созданном мною цветовом массиве, в котором будут сохранены все создаваемые цветовые коды. Но, как вы можете видеть при тестировании проекта, кнопка «Назад» не совсем работает, и я понимаю это из-за того, что переменная «i» не сохраняется при вызове функции «prevColor».
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>
Пожалуйста, проверьте ссылку. Я обновил ваш код, объявив переменные.
var HSLcolor;
var back = document.querySelector("#back");
> var randomColors = [];var i =0;
https://jsfiddle.net/kobmajyx/6/
это не решает проблему? как это помогает
спасибо за вклад, но я не понимаю, как это решает мою проблему
Джамал, из вашего вопроса я понял, что кнопка возврата не работает. Если это правильно, отметьте ссылку, которую я добавил.
Что ж, это как бы решает мою проблему, но ваше обновление может вернуться только на один цвет, и если вы вернетесь и затем нажмете «кнопку нового цвета», будет создан новый цвет, а не тот, который был там до возврата, используется . в любом случае спасибо, я нашел решение :)
Во-первых, хочу прояснить пользовательский интерфейс.
<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()
.
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 Обновил ответ. Возможно, результат немного завышен, но я надеюсь, что смог передать несколько полезных идей.
Вы не обновляете значение i
в методе prevColor()
. Попробуй это:
function prevColor() {
if (randomColors.length > 0 && i > 0) {
i--;
bodyStyle.backgroundColor = randomColors[i]
console.info(randomColors, i)
}
};
Я вижу, как это решает одну проблему, у меня была такая же идея, но моя проблема здесь в том, что когда выполняется функция prevColor, а я продолжаю использовать функцию newColor, которую может изменить массив; как в первом его [случайный цвет 1, случайный цвет 2, случайный цвет 3 (текущий)] (вернуться от случайного цвета 3 к RC 2) [случайный цвет 1, случайный цвет 2 (текущий)] и теперь, если я продолжу генерировать цвета RC 3 не будет таким же, потому что создается новый. Это не имеет большого значения, но мне просто интересно, как это исправить :) В любом случае большое спасибо
@ jamal000 Вы можете использовать 2 разных индекса - i
для добавления цветов (используйте только i ++) и другой индекс j
для отслеживания текущего цвета (вы можете использовать j-- для назад и j ++ для вперед)
Вы должны начать отделять вашу презентационную функцию от обработки событий.
Ваш код должен иметь вид https://jsfiddle.net/ryx2gn01/19/
Теперь у вас есть массив оттенков (randomColors
), и когда вы нажимаете «Удиви меня», он должен добавить новое значение оттенка в массив и установить текущий индекс (переменная i
) на последний цвет (потому что вы хотите показать цвет вы просто вставили в массив), поэтому i = randomColors.length - 1
После нажатия «Предыдущий цвет» у вас будет 2 случая, ваш индекс уже находится в начале списка (i <= 0
) или не является первым (i > 0
). В первом случае вы не хотите изменять свой индекс, но во втором случае вы хотите уменьшить его на единицу, поэтому if ... then ... else вы видите в функции prevColor
. Наконец, после изменения состояния вы вызываете функцию, отвечающую за отображение результатов setColor(i)
, передавая текущий индекс.
Надеюсь, вам понравится мое решение, оно не идеально, но надеюсь, что оно вам поможет
ну, так как вы вернулись на один, вам нужно обновить i, когда вы нажмете