Function add class in pure JavaScript [can not be es2015 / 2016]

Question

Function add class in pure JavaScript [can not be es2015 / 2016]

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

Good morning, everyone.

I've done an effect in which you click on a div and swap the image with css animation effect. In the case, I used the jquery addClass / toggleClass (I used the 2).

But I wanted to do a script using pure JavaScript. I have seen some tutorials, but several different and complex forms. Is there any simpler way?

$('#btnPack1').on('click', function() {
  $('#pack1, #pack2, #imgBullet1, #imgBullet2, #imgBullet3').addClass('active');
});

//$('#btnPack1').on('click', function(){
//	$('#pack1, #pack2, #imgBullet1, #imgBullet2, #imgBullet3').toggleClass('active');
//});

#corpo {
  width: 1024px;
  height: 768px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#pack1 {
  position: absolute;
  width: 890px;
  top: 160px;
  left: 78px;
}

#btnPack1 {
  position: absolute;
  width: 60px;
  height: 100px;
  top: 378px;
  left: 65px;
  background: red;
}

#pack1.active {
  opacity: 1;
  -webkit-animation-name: fadeIn;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-delay: 0s;
}

@-webkit-keyframes fadeIn {
  0% {
    left: 78px;
    opacity: 1
  }
  60% {
    opacity: 0;
  }
  100% {
    left: -1000px;
    opacity: 0;
  }
}

#pack2 {
  position: absolute;
  width: 981px;
  top: 0;
  opacity: 0;
  left: 1030px;
  height: 768px;
}

#imgPac2 {
  position: absolute;
  width: 654px;
  top: 183px;
}

#pack2.active {
  opacity: 0;
  -webkit-animation-name: pack2;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-delay: .5s;
}

@-webkit-keyframes pack2 {
  0% {
    left: 1030px;
    opacity: 0
  }
  60% {
    opacity: 1;
  }
  100% {
    left: 35px;
    opacity: 1;
  }
}

#imgBullet1 {
  width: 220px;
  position: absolute;
  top: 378px;
  left: 677px;
}

#imgBullet1.active {
  opacity: 0;
  -webkit-animation-name: imgBullet1;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-delay: 2s;
}

@-webkit-keyframes imgBullet1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#imgBullet2 {
  width: 220px;
  position: absolute;
  top: 456px;
  left: 677px;
}

#imgBullet2.active {
  opacity: 0;
  -webkit-animation-name: imgBullet2;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-delay: 2.6s;
}

@-webkit-keyframes imgBullet2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#imgBullet3 {
  width: 220px;
  position: absolute;
  top: 540px;
  left: 677px;
}

#imgBullet3.active {
  opacity: 0;
  -webkit-animation-name: imgBullet3;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-delay: 3.4s;
}

@-webkit-keyframes imgBullet3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="corpo">

  <img id="pack1" class="" src="http://placehold.it/860x790"><divid="btnPack1"></div>

  <div id="pack2">
    <img id="imgPac2" class="" src="http://lorempixel.com/654/700/"><imgid="imgBullet1" class="" src="http://placehold.it/280x50"><imgid="imgBullet2" class="" src="http://placehold.it/280x50"><imgid="imgBullet3" class="" src="http://placehold.it/280x50">
  </div>
</div>

Thanks to everyone

javascript jquery css

asked by anonymous 26.05.2017 / 16:01

2 answers

0

Change this part of your script:

$('#btnPack1').on('click', function(){
    $('#pack1, #pack2, #imgBullet1, #imgBullet2, #imgBullet3').addClass('active');
});

By:

document.getElementById('btnPack1').onclick = function (){
    document.getElementById('pack1').class += 'active';
    document.getElementById('pack2').class += 'active';
    document.getElementById('imgBullet1').class += 'active';
    document.getElementById('imgBullet2').class += 'active';
    document.getElementById('imgBullet3').class += 'active';
}

26.05.2017 / 16:04

How to find a string based on a group of regular expressions Google Drive .NET Quickstart Error for Credentials

score 1 · Accepted Answer

You can use classList methods

Element.classList.toggle('nome-da-class')
Element.classList.add('nome-da-class')
Element.classList.remove('nome-da-class')

Applying this to your code,

document.querySelector('#btnPack1').onclick = function() {
    document.querySelector('#pack1, #pack2, #imgBullet1, #imgBullet2, #imgBullet3').classList.add('active')
}