Can someone help me write this in javascript

Question

I am trying to write this code in javascript from jquery

I already tried but cant seems to get equivalent to work.

$(document).ready(function() {

  $('a').click(function() {

    var selected = $(this);
    $('a').removeClass('active');
    $(selected).addClass('active');
  });

  var $a = $('.a'),
    $b = $('.b'),
    $c = $('.c'),
    $d = $('.d'),
    $home = $('.home'),
    $about = $('.about');

  $a.click(function() {

    $home.fadeIn();
    $about.fadeOut();
  });

  $b.click(function() {

    $home.fadeOut();
    $about.fadeIn();
  });
});

The code works perfect in jQuery, but am trying to just use javascript. Its basically to add and remove class when a nav item is selected. I don't know if am explaining as clear as possible but am try to write the equivalent of this in javascript.

This is what I have tried.

var callback = function(){

 var clickHandler1 = function() { 

        document.getElementById("home").classList.remove("home"); 

       //var rem = document.getElementById("home");
       //fadeOut(rem);
       //alert("I am clicked B");
};

var anchors1 = document.getElementsByClassName("b");
for (var i = 0; i < anchors1.length; i++) {
        var current = anchors1[i];
        current.addEventListener('click', clickHandler1, false);
}

function fadeOut(el){
    el.style.opacity = 1;

    function fade() {
        if ((el.style.opacity -= .1) < 0) {
             el.style.display = "none";
        } else {
             requestAnimationFrame(fade);
          }
        })();
    };              

    fadeIn(el, display){
        el.style.opacity = 0;
        el.style.display = display || "block";

        (function fade() {
             var val = parseFloat(el.style.opacity);
             if (!((val += .1) > 1)) {
                 el.style.opacity = val;
                 requestAnimationFrame(fade);
             }
        })();
    };


 }

 if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {

  callback();

} else {

    document.addEventListener("DOMContentLoaded", callback);

}

Use document.getElementById("elem").classList.remove("classnm"); — Sudhakar Ramasamy, Oct 06 '19 at 03:12
Please show what you have tried. Stack Overflow isn't a free code conversion service. The objective here is for you to show your attempts to solve your own issue and people help when that attempt isn't working as expected. Also the jQuery fade methods are not cut and dried since they require using interval timers to modify each step — charlietfl, Oct 06 '19 at 03:13

Rodrigo Wladyka · Answer 1 · 2019-11-05T12:51:54.960

The code in es6:

window.onload = function() {
  const allLinks = document.querySelectorAll('a')

  console.log(allLinks)

  const removeAllClass = () => {
    allLinks.forEach(link => {
      link.classList.remove('active')
    })
  }


  allLinks.forEach(element => {
    element.addEventListener('click', event => {
      removeAllClass()
      element.classList.add('active')
    })
  })

  let $a = document.querySelectorAll('.a'),
  $b = document.querySelectorAll('.b'),
  $home = document.querySelector('.home'),
  $about = document.querySelector('.about');

  $a.forEach(element => {
    element.addEventListener('click', event => {
      $about.classList.remove('fadeIn');
      $home.classList.add('fadeIn');      
    })
  })

  $b.forEach(element => {
    element.addEventListener('click', event => {
      $home.classList.remove('fadeIn');
      $about.classList.add('fadeIn');
    })
  })

}

you can see working on https://codepen.io/rwladyka/pen/qBBBpvy

score -1 · Answer 2 · answered Oct 06 '19 at 03:16

-1

document.getElementsByClassName('a') is the javascript equivalent of $('.a')

answered Oct 06 '19 at 03:16

Djbhai

81
1
3

1

This really doesn't answer the question. Take a few minutes to read through [answer] – charlietfl Oct 06 '19 at 03:21
Not trying to *"act"* anything. Can see you are a new user and simply made a comment that the answer does not fit normal SO standards and supplied a link with more details – charlietfl Oct 06 '19 at 03:43

Can someone help me write this in javascript

2 Answers2