set class active to next slide element

Question

I have a question about Javascript. You can find my HTML markup below

<div class="slides">
  <div class="slide active" id="one"></div>
  <div class="slide" id="two"></div>
  <div class="slide" id="third"></div>
  <div class="slide" id="fourth"></div>
</div>

<button onclick="slide-down()">
  Next slide
</button>

<button onclick="slide-up()">
  Previous slide
</button>

What can i do if the user click on the button slide-down to remove with pure javascript the class 'active' en set this to the next slide element?

for starters `-` is not valid in a function name, so drop that! — Jamiec, Sep 27 '16 at 17:33
You should start by looking at [Change an element's class with JavaScript](http://stackoverflow.com/q/195951/218196) — Felix Kling, Sep 27 '16 at 17:35
For this example you look this. it will help you.[http://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery] — Bharat Makvana, Sep 27 '16 at 18:06

score 0 · Answer 1 · answered Sep 27 '16 at 17:42

Something like the below will work. Makes use of many javascript DOM properties and methods. You will need to change the names of your functions slightly as a hyphen is not valid in a name of a function. Ive replaced with underscores.

function slide_down(){
    var elems = document.querySelectorAll(".slide");
    var curr = document.querySelector(".active");
    curr.classList.remove("active");
    if(curr.nextElementSibling)
        curr.nextElementSibling.classList.add("active");
    else
        elems[0].classList.add("active");
}

function slide_up(){
    var elems = document.querySelectorAll(".slide");
    var curr = document.querySelector(".active");
    curr.classList.remove("active");
    if(curr.previousElementSibling)
        curr.previousElementSibling.classList.add("active");
    else
        elems[elems.length-1].classList.add("active");
}

.active{background-color:red}

<div class="slides">
  <div class="slide active" id="one">1</div>
  <div class="slide" id="two">2</div>
  <div class="slide" id="third">3</div>
  <div class="slide" id="fourth">4</div>
</div>

<button onclick="slide_down()">
  Next slide
</button>

<button onclick="slide_up()">
  Previous slide
</button>

score 0 · Accepted Answer · answered Sep 27 '16 at 17:52

You can use a single function, set class at <button> elements to "prev" and "next", pass clicked button .className to function; .getElementsByClassName(), .nextElementSibling, .previousElementSibling

.active {
  color: green;
}

<div class="slides">
  <div class="slide active" id="one">one</div>
  <div class="slide" id="two">two</div>
  <div class="slide" id="third">third</div>
  <div class="slide" id="fourth">fourth</div>
</div>

<button class="next" onclick="slide(this.className)">
  Next slide
</button>

<button class="prev" onclick="slide(this.className)">
  Previous slide
</button>
<script>
  var active = document.getElementsByClassName("active");

  function slide(prevNext) {
    if (prevNext === "next") {
      if (active[0].nextElementSibling) {
        active[0].nextElementSibling.className = "active";
        active[0].className = "";
      }
    } else {
      if (active[0].previousElementSibling) {
        active[0].previousElementSibling.className = "active";
        active[active.length - 1].className = "";
      }
    }
  }
</script>

score 0 · Answer 3 · answered Sep 27 '16 at 17:58

Here is an example I wrote. Jasmiec answered before I finished, and I honestly like some of the different methods used in that example. As already mentioned, you will need to change the names of your functions because a hyphen makes the name invalid.

<div class="slides">
  <div class="slide active" id="one"></div>
  <div class="slide" id="two"></div>
  <div class="slide" id="three"></div>
  <div class="slide" id="four"></div>
</div>

<button onclick="slideDown()">
  Next slide
</button>

<button onclick="slideUp()">
  Previous slide
</button>

<script>
var slides = ["one", "two", "three", "four"]
function slideDown() {
    var element = document.getElementsByClassName('active')[0];
    var index = slides.indexOf(element.id) + 1;
  if (index < slides.length) {
    element.className = "slide";
    document.getElementById(slides[index]).className = "slide active";
  }
}

function slideUp() {
    var element = document.getElementsByClassName('active')[0];
    var index = slides.indexOf(element.id) - 1;
  if (index >= 0) {
    element.className = "slide";
    document.getElementById(slides[index]).className = "slide active";
  }
}
</script>

set class active to next slide element

3 Answers3