javascript - How to move the ID of one element to another using JS

Question

I am trying to create a slide show of icons. All the icons are in one class. Another style class called "active" will have an ID and represents the current picture. Clicking the left or right button should change the style of the active class.

const leftArrow = document.getElementById('left-arrow');
const activeImg = document.getElementById('active') const nextImg = activeImg.nextElementSibling; // Handle left click leftArrow.addEventListener('click', function(){ activeImg.classList.remove('active');
nextImg.classList.add('active');
return nextImg
});

.icon-container i {
  font-size: 150px;
  position: relative;
  left: 12rem;
  top: 12rem;
  z-index: -10;
  display: none;
}

#active {
  z-index: 10;
  display: flex;
}

.left-arrow,
.right-arrow {
  width: 50px;
  height: 50px;
  transition: .5s;
  float: left;
  box-shadow: -2px 2px 0 rgba(238, 0, 0, 0.5);
  cursor: pointer;
}

<div class="object-container">

  <div class="icon-container">
    <i class="fa fa-car" id="active"></i>
    <i class="fa fa-bicycle"></i>
    <i class="fa fa-plane"></i>
    <i class="fa fa-ship"></i>
    <i class="fa fa-fighter-jet"></i>
    <i class="fa fa-space-shuttle"></i>
  </div>
  <div class="arrow-buttons">
    <a href="" class="right-arrow" id="right-arrow"></a>
    <a href="" class="left-arrow" id="left-arrow"></a>
  </div>
</div>

Answer 1

I recommend using a class name and not an id. Here's how you can do that:

https://jsfiddle.net/sauz07d5/1

 <div class="object-container">

    <div class="icon-container">
        <i class="fa fa-car active"></i>
        <i class="fa fa-bicycle"></i>
        <i class="fa fa-plane"></i>
        <i class="fa fa-ship"></i>
        <i class="fa fa-fighter-jet"></i>
        <i class="fa fa-space-shuttle"></i>
    </div>
    <div class="arrow-buttons">
        <button class="right-arrow" id="right-arrow"></button>
        <button class="left-arrow" id="left-arrow"></button>
    </div>
    </div>

.icon-container i{
font-size: 150px;
position: relative;
left: 12rem;
top: 12rem;
z-index: -10;
display: none;
}



.left-arrow, .right-arrow{
width: 50px;
height: 50px;
transition: .5s;
float: left;
box-shadow: -2px 2px 0 rgba(238, 0, 0, 0.5);
cursor: pointer;
}

.active {
z-index: 10 !important;
display: flex !important;
}

const leftArrow = document.getElementById('left-arrow');
const rightArrow = document.getElementById('right-arrow');



// Handle left click

var element = document.querySelector(".icon-container")

function slideNext() {
let currentImg = document.querySelector(".active");
let nextImg = currentImg.nextElementSibling ? currentImg.nextElementSibling : element.children[0];

currentImg.classList.remove("active");
nextImg.classList.add("active");
}

function slidePrevious() {
let currentImg = document.querySelector(".active");
let previousImg = currentImg.previousElementSibling ? currentImg.previousElementSibling : element.children[element.children.length - 1];

currentImg.classList.remove("active");
previousImg.classList.add("active");
}


leftArrow.addEventListener('click', slideNext);
leftArrow.addEventListener('touch', slideNext);

rightArrow.addEventListener('click', slidePrevious);
rightArrow.addEventListener('touch', slidePrevious);