If element has class do nothing else run anonymous function

Question

I want to add an if statement to my javascript so that if my section class has the class active i don't want it to do anything on the button click but if it doesn't have it i want it to run the anonymous function i have created which is just a simple transition. Cant quite work it where it would need to go or how to implement it. I haven't set the slides to change on click yet as I just wanted to get this bit working first.

EDIT

Just to clarify I am not to sure if the if statement checking for the class active would have to be before the loop or inside the btn[i] event listener. if document.querySelectorAll('.sections').classListContains('active') { Do Nothing } else { run the below code}

Appreciate any advice

var btn = document.querySelectorAll('.button');
var sections = document.querySelectorAll('.sections');
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
    document.querySelector('.transition__overlay').classList.add('transition__overlay--active');
    setTimeout(function() {
      document.querySelector('.transition__overlay').classList.remove('transition__overlay--active');
    }, 1200);
  });
}

* {
  padding: 0;
  margin: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.buttons {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background: grey;
}

.button {
  flex: 1 0 0;
  text-align: center;
  cursor: pointer;
}

.button span {
  color: black;
}

.transition__overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  z-index: 9999;
  background-color: brown;
  transition: width 1s;
}

.transition__overlay--active {
  width: 100%;
  left: 0;
  transition: width 1s;
}

.sections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sections.active {
  transform: translateX(0);
}

<div class="wrapper">
  <div class="transition__overlay"></div>
  <section class="sections section1 active">
    <span>Section 1</span>
  </section>
  <section class="sections section2">
    <span>Section 2</span>
  </section>
  <section class="sections section3">
    <span>Section 3</span>
  </section>
  <section class="sections section4">
    <span>Section 4</span>
  </section>
  <div class="buttons">
    <div class="button button1">
      <span>button 1</span>
    </div>
    <div class="button button1">
      <span>button 2</span>
    </div>
    <div class="button button1">
      <span>button 3</span>
    </div>
    <div class="button button1">
      <span>button 4</span>
    </div>
  </div>
</div>

Where is the if condition that you have tried so far? And what exactly do you need from us? — B001ᛦ, Apr 26 '18 at 14:35
Possible duplicate of [Test if an element contains a class?](https://stackoverflow.com/questions/5898656/test-if-an-element-contains-a-class) — Huangism, Apr 26 '18 at 14:36
How do you know which `.sections` to check for `.active`? the click event is on a `.button`. — Joseph Marikle, Apr 26 '18 at 14:39
The if statment would be if document.querySelectorAll('.sections').classListContains('active') { do nothing} else { run the javascript code above} thats what i am trying to achieve — rufus, Apr 26 '18 at 14:45
@B001 I dont know why its considered rubbish all i want is when the button is clicked not to run the transition if there is an active class applied to the section — rufus, Apr 26 '18 at 14:53
do not think about "not doing" but "doing" something IF condition is met.. @rufus... I am out — B001ᛦ, Apr 26 '18 at 14:55
I see what you mean, I will have a re-think how to go about this. Ive only been learning this for a few months so still working my way round doing things the right way — rufus, Apr 26 '18 at 14:59

score 0 · Answer 1 · 2018-04-27T09:05:06.210

Solution

A working solution with if statement which will stop the effect if any sections class has class active

// Check whether any element with class `sections` has `active` class
function CheckClass()
{
  for (var j = 0 ; j < document.getElementsByClassName("sections").length ; j++) {
    for (var k = 0 ; k < document.getElementsByClassName("sections").length ; k++ ) {
        if (document.getElementsByClassName("sections")[j].getAttribute("class") == "sections section" + k +  " active")
      return "active" ;
    // the `sections` class has an `active class`
    // exit
    }
  }
  return "inactive" ;
}
var btn = document.querySelectorAll('.button');
var sections = document.querySelectorAll('.sections');
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() {
   if (CheckClass() !== "active") { document.querySelector('.transition__overlay').classList.add('transition__overlay--active');
    setTimeout(function() {
      document.querySelector('.transition__overlay').classList.remove('transition__overlay--active');
    }, 1200);
    }
  });
}

* {
  padding: 0;
  margin: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
}

.buttons {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background: grey;
}

.button {
  flex: 1 0 0;
  text-align: center;
  cursor: pointer;
}

.button span {
  color: black;
}

.transition__overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  z-index: 9999;
  background-color: brown;
  transition: width 1s;
}

.transition__overlay--active {
  width: 100%;
  left: 0;
  transition: width 1s;
}

.sections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sections .active {
  transform: translateX(0%);
}

<div class="wrapper">
  <div class="transition__overlay"></div>
  <section class="sections section1 active">
    <span>Section 1</span>
  </section>
  <section class="sections section2">
    <span>Section 2</span>
  </section>
  <section class="sections section3">
    <span>Section 3</span>
  </section>
  <section class="sections section4">
    <span>Section 4</span>
  </section>
  <div class="buttons">
    <div class="button button1">
      <span>button 1</span>
    </div>
    <div class="button button1">
      <span>button 2</span>
    </div>
    <div class="button button1">
      <span>button 3</span>
    </div>
    <div class="button button1">
      <span>button 4</span>
    </div>
  </div>
</div>

If element has class do nothing else run anonymous function

1 Answers1

Solution