tidesCorp157 tidesCorp157 - 3 months ago 15
jQuery Question

Translating jQuery to Vanilla JS issue

I was watching a tutorial that used jQuery and wanted to turn it into JS, but my code is broken - was hoping someone could help me with this:

Tutorial JS:

$(function() {
var btn = $('button');
var progressBar = $('.progressbar');

btn.click(function() {
progressBar.find('li.active').next().addClass('active');
})
})


Taken from URL:http://www.kodhus.com/kodity/codify/kod/mGXAtb

Here is my failed attempt at rewriting the jQuery using JavaScript DOM:

var btn1 = document.getElementsByTagName('BUTTON');
var progBar = document.getElementsByClassName('progressbar');

function clickMe1() {
var elm = progBar.querySelectorAll("li");
var emlClass = elm.querySelector(".active");
return emlClass.nextElementSibling.addClass('active');
}

btn1.addEventListener("click", clickMe1, false);


where did I go wrong?

Answer

Working fiddle.

Your code will work after several changes check the notes below :

  1. You've missed addClass() there it's a jQuery function, for vanilla JS use .classList.add() instead:

    return emlClass.nextElementSibling.classList.add("active");
    
  2. querySelectorAll(); will return a list of nodes you have to loop through them and add class, use :

    var emlClass = progBar.querySelectorAll("li.active");
    

    Instead of :

    var elm = progBar.querySelectorAll("li");
    var emlClass = elm.querySelector(".active");
    

    Then loop and add active class:

    for(var i=0;i<emlClass.length;i++){
        emlClass[i].nextElementSibling.classList.add("active");
    }
    
  3. getElementsByTagName() and getElementsByClassName() will also returns a list of nodes with given name, you have to specify which one you want to pick (selecting the first in my example) :

    var btn1 = document.getElementsByTagName('BUTTON')[0];
    var progBar = document.getElementsByClassName('progressbar')[0];
    

Hope this helps.

var btn1 = document.getElementsByTagName('BUTTON')[0];
var progBar = document.getElementsByClassName('progressbar')[0];

function clickMe1() {
  var emlClass = progBar.querySelectorAll("li.active");
  
  for(var i=0;i<emlClass.length;i++){
    emlClass[i].nextElementSibling.classList.add("active");
  }
}

btn1.addEventListener("click", clickMe1, false);
.container {
  width: 100%;
}

.progressbar {
  counter-reset: step;
  margin: 0;
  margin-top: 50px;
  padding: 0;
}

.progressbar li {
  list-style-type: none;
  float: left;
  width: 33.33%;
  position: relative;
  text-align: center;
}

.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #ddd;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}

.progressbar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ddd;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  border-color: green;
}

.progressbar li.active + li:after {
  background-color: green;
}
button {
  position: relative;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 2px;
  left: 50%;
  margin-top: 30px;
  transform: translate(-50%);
  cursor: pointer;
  outline: none;
}
button:hover {
  opacity: 0.8;
}
<div class="container">
  <ul class="progressbar">
    <li class="active">Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
  </ul>
</div>
<button>Next step</button>

Comments