Как сделать эту логику

У меня проблема с этим упражнением Как сделать эту логику

Пока у меня есть коробки, но логику в javascript я не знаю, как это сделать? Какой-нибудь совет?

это мой прогресс:

Как сделать эту логику

Код действительно прост:

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>David Aparicio</title>
</head>
<body>
    <div class = "container">
        <div class = "box active">
    </div>

    <div class = "box">
    </div>

    <div class = "box">
    </div>        
</div>
<div class = "buttons">
    <button> Left </button>
    <button> Right </button>
</div>

Вы пробовали написать какой-нибудь javascript для этого? если да, то покажите нам и укажите ту часть, где вы застряли. Так вы добьетесь лучших результатов в этом сообществе

— 09.11.2018 18:14

Нет, я застрял, я не знаю, как перейти к каждому div

— 09.11.2018 18:17

В основном вам нужно написать код javascript для взаимодействия с элементами и перемещения «активного» класса. Подсказка: используйте массивы для моделирования списка ящиков.

— 09.11.2018 18:18

Ну, разбей это. Получите ссылку на каждый div, затем напишите код, чтобы установить цвет div на белый или красный, затем напишите код подкачки. Мы рады помочь вам заставить ваш код работать, но выполнение всего этого обычно считается слишком широким. Сначала вам следует потратить некоторое время на изучение самых основ JS.

— 09.11.2018 18:19

javascript html dom

09.11.2018 18:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Вот мой взгляд на это.

Сначала я добавил идентификаторы к вашим кнопкам, чтобы ссылаться на них.

<div class = "buttons">
  <button id = "left"> Left </button>
  <button id = "right"> Right </button>
</div>

Тогда мой javascript выглядит так:

//Find all boxes and put them in an array
let boxes = document.querySelectorAll(".box");
let activeIndex = 0;

function changeActive() {
  //remove previous active class
  document.querySelector(".active").classList.remove("active");

  //find box at active index and add active class
  document.querySelectorAll(".box")[activeIndex].classList.add("active");
}

//Event listeners to increment and decrement the active index

document.getElementById("left").addEventListener("click", function() {
  if (activeIndex > 0) {
    activeIndex -= 1;
    changeActive();
  }
});

document.getElementById("right").addEventListener("click", function() {
  if (activeIndex < boxes.length -1) {
    activeIndex += 1;
    changeActive();
  } 
});

JSFiddle: https://jsfiddle.net/r6foyj1d/13/

09.11.2018 18:34