Создание кнопки возврата для использования в массиве

Итак, в настоящее время я работаю над небольшим веб-сайтом проекта, который в основном меняет цвет фона при нажатии кнопки. Но я также пытаюсь реализовать кнопку «назад», чтобы вернуться назад в созданном мною цветовом массиве, в котором будут сохранены все создаваемые цветовые коды. Но, как вы можете видеть при тестировании проекта, кнопка «Назад» не совсем работает, и я понимаю это из-за того, что переменная «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"> &#9668; </button>
    <button id = "change">Click for a surprise!!!</button>
  </div>

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

ну, так как вы вернулись на один, вам нужно обновить i, когда вы нажмете

Liora Haydont 09.08.2018 18:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
171
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Пожалуйста, проверьте ссылку. Я обновил ваш код, объявив переменные.

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

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

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

это не решает проблему? как это помогает

Liora Haydont 09.08.2018 18:49

спасибо за вклад, но я не понимаю, как это решает мою проблему

jamal000 09.08.2018 20:31

Джамал, из вашего вопроса я понял, что кнопка возврата не работает. Если это правильно, отметьте ссылку, которую я добавил.

Kapil gopinath 09.08.2018 21:45

Что ж, это как бы решает мою проблему, но ваше обновление может вернуться только на один цвет, и если вы вернетесь и затем нажмете «кнопку нового цвета», будет создан новый цвет, а не тот, который был там до возврата, используется . в любом случае спасибо, я нашел решение :)

jamal000 10.08.2018 18:34

Во-первых, хочу прояснить пользовательский интерфейс.

<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().

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 09.08.2018 20:49

@ jamal000 Обновил ответ. Возможно, результат немного завышен, но я надеюсь, что смог передать несколько полезных идей.

dhilt 09.08.2018 22:35
Ответ принят как подходящий

Вы не обновляете значение 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 09.08.2018 20:42

@ jamal000 Вы можете использовать 2 разных индекса - i для добавления цветов (используйте только i ++) и другой индекс j для отслеживания текущего цвета (вы можете использовать j-- для назад и j ++ для вперед)

Satya Sampathirao 10.08.2018 22:04

Вы должны начать отделять вашу презентационную функцию от обработки событий.

Ваш код должен иметь вид https://jsfiddle.net/ryx2gn01/19/

  • у вас есть 2 действия: prevColor и newColor оба изменяют состояние приложения и запускают изменение в презентации:
  • одна внутренняя функция обработки, которая будет генерировать ваш цвет (randomHSL)
  • одна функция представления, которая устанавливает значения там, где вы хотите (setColor)

Теперь у вас есть массив оттенков (randomColors), и когда вы нажимаете «Удиви меня», он должен добавить новое значение оттенка в массив и установить текущий индекс (переменная i) на последний цвет (потому что вы хотите показать цвет вы просто вставили в массив), поэтому i = randomColors.length - 1

После нажатия «Предыдущий цвет» у вас будет 2 случая, ваш индекс уже находится в начале списка (i <= 0) или не является первым (i > 0). В первом случае вы не хотите изменять свой индекс, но во втором случае вы хотите уменьшить его на единицу, поэтому if ... then ... else вы видите в функции prevColor. Наконец, после изменения состояния вы вызываете функцию, отвечающую за отображение результатов setColor(i), передавая текущий индекс.

Надеюсь, вам понравится мое решение, оно не идеально, но надеюсь, что оно вам поможет

Другие вопросы по теме