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>

The problem is that when I click the left arrow, nothing happens. I've also tried with the right arrow but that doesnt even show the cursor pointer so I don't know where I went wrong there. I've played around with z-index and display types but the buttons don't seem to be working?

Thanks

Answer 1

var icons = [...document.querySelectorAll('.icon-container .fa')];

function adjustActive (adjustment) {
  var current = icons.find(it => it.id === 'active');
  var currentIndex = icons.indexOf(current);
  var nextIndex = (currentIndex + adjustment) % icons.length;
  
  if (nextIndex < 0) nextIndex = icons.length - 1;
  
  current.removeAttribute('id');
  icons[nextIndex].id = 'active';
}

document.querySelector('#left-arrow').addEventListener('click', e => adjustActive(-1));
document.querySelector('#right-arrow').addEventListener('click', e => adjustActive(1));

#active {
  color: red;
}

<div class="object-container">
  <div class="icon-container">
    <i class="fa fa-car" id="active">Car</i>
    <i class="fa fa-bicycle">Bike</i>
    <i class="fa fa-plane">Plane</i>
    <i class="fa fa-ship">Ship</i>
    <i class="fa fa-fighter-jet">Jet</i>
    <i class="fa fa-space-shuttle">Shuttle</i>
  </div>
  <div class="arrow-buttons">
    <a href="#" class="left-arrow" id="left-arrow">Prev</a>
    <a href="#" class="right-arrow" id="right-arrow">Next</a>
  </div>
</div>

While it is typically preferable to move classes around, you can (if you must) move ids around. The example above uses the id to find the active element, and using the position of the active element in the array of elements, it finds the next element by adjusting the current index. Then it is a simple matter of removing the id from the old current and putting it on the new current.

Answer 2

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);

Answer 3

Instead of using active as an ID, you should use it as a class, like so:

<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>

Just create click listeners for the left and right buttons and remove the active class from the current item and add it to its previous or next sibling.

Or, if you consider its not worth the time to create your own implementation you can also use an already available one like Owl Carousel