Question 188860 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – active class to elements one by one with basic js

i need to "move" active class one by one to this 5 div elements but with very basic js because still learning basics, i found this solution and it work but i want transform this in a for loop,it is possible without any function,foreach loop,only with very basics? thanks

this is my solution:

next.addEventListener('click', function(){

    let current = document.querySelector('.active')

    if(current.classList.contains('active')){
        imgItems[1].classList.add('active')
        imgItems[0].classList.remove('active')
    }

    if (current.classList.contains('active')) {
        imgItems[1].classList.remove('active')
        imgItems[2].classList.add('active')
    }
    if (current.classList.contains('active')) {
        imgItems[2].classList.remove('active')
        imgItems[3].classList.add('active')
    }
    if (current.classList.contains('active')) {
        imgItems[3].classList.remove('active')
        imgItems[4].classList.add('active')
    }
    

})

I try many times and online solutions is nice but too advanced for me,i have learning only array and cycle.

Tags:

2

Answers


  1. 0

    Assuming the items are adjacent in the DOM, you can use nextElementSibling to go to the next item.

    const next = document.getElementById("next");

next.addEventListener("click", function() {
  let current = document.querySelector(".active");
  let nextItem = current.nextElementSibling;
  if (!nextItem) {
    // Go back to the first item
    nextItem = document.querySelector(".item");
  }
  current.classList.remove("active");
  nextItem.classList.add("active");
})
    .active {
  color: red;
}
    <div id="container">
  <div class="item active">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

<button id="next">Next</button>
    Login or Signup to reply.
  2. 0

    Here you go

    next.addEventListener('click', function() {
    let current = document.querySelector('.active');
    for (let index = 0; index <= 3; index++) {
        if (current.classList.contains('active')) {
            imgItems[index].classList.remove('active');
            imgItems[index + 1].classList.add('active');
        }
    }
});

    Javascript has no foreach loop. It has for .. in loop, for .. of loop and normal C-style loop. In this case I have used the latter because we are to work with indexes.

    It seems that you intend to cascade the active class towards the end of some imgItems set, so the idea is to loop an index from 0 up to 3 and each time to check whether current has an active class, then remove that class from the actual element on the index we are currently on and add this class to the next. You can also do it without a loop, like this:

    let imgItems = [...document.querySelectorAll('div')];
document.getElementById("next").addEventListener('click', function() {
    let current = document.querySelector('.active');
    let index = imgItems.indexOf(current);
    if (index < imgItems.length - 1) {
        imgItems[index].classList.remove('active');
        imgItems[index + 1].classList.add('active');
    } else {
        alert('You are at the last item');
    }
});
    div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
}

div.active {
    background-color: green;
}
    <div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<input type="button" value="next" id="next">

    Basically we convert the array-like object called imgItems to an array using the spread operator (the […] part) and inside the event, you get the index of current in the array and if it’s not the very last one, you remove the active class and add it to the next.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search