Convert jQuery to plain Javascript
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

This is a jQuery snippet that works with animate.css. I'd like to use plain Javascript instead of jQuery.
$(function() {
var animationName = "animated fadeInRight";
var collapse = "collapse";
var animationend =
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
var $select = $(".span-select");
var $span = $(".slide-span");
$select.on("change", function() {
var value = "." + $(this).val();
$span
.addClass(animationName).removeClass(collapse)
.not(value)
.removeClass(animationName).addClass(collapse);
});
var $authselect = $("#authSelect");
var $authslide = $(".slide-auth");
$authselect.on("change", function() {
var value = "." + $(this).val();
$authslide
.addClass(animationName).removeClass(collapse)
.not(value)
.removeClass(animationName).addClass(collapse);
});
});

i have updated my bounty, with a working solution in jsfiddle,
Chlegou 5 months ago
awarded to Chlegou

Crowdsource coding tasks.

2 Solutions


(function() {

    var animationName = "animated fadeInRight";
    var collapse      = "collapse";
    var animationend  =
    "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
    var $select       = document.querySelector(".span-select");
    var $span         = document.querySelector(".slide-span");

    $select.addEventListener("change", function() {

        var value = "." + this.value;
        $span.classList.add(animationName);
        $span.classList.remove(collapse);

        document.querySelector(".slide-span:not(" + value + ")").classList.remove(animationName);
        document.querySelector(".slide-span:not(" + value + ")").classList.add(collapse);

    });

    var $authselect = document.querySelector("#authSelect");
    var $authslide = document.querySelector(".slide-auth");

    $authselect.addEventListener("change", function() {

        var value = "." + this.value;
        $authslide.classList.add(animationName);
        $authslide.classList.remove(collapse);

        document.querySelector(".slide-auth:not(" + value +")").classList.remove(animationName);
        document.querySelector(".slide-auth:not(" + value +")").classList.add(collapse);

    });

}());
Doesn't work. Ideas?
LWinchester 5 months ago

UPDATE

this project is now linked in guithub from here: https://github.com/chlegou/jqueryToPlainJs

Here is a working solution in jsFiddle.

link: https://jsfiddle.net/f904c3rv/1/

now the animation is working

final js code is provided here:

    // Slides in email and mobile fields
    (function () {

        var animationName = "animated fadeInRight";
        var collapse = "collapse";
        var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";


        var select = document.querySelector(".span-select");
        var spanSelector = ".slide-span";

        select.addEventListener("change", function () {

            // var value = "." + select.value; // if the element is <input>
            var value = "." + select.options[select.selectedIndex].value; // if the element is <select> use this line instead

            // initiate items, by deleting last changes
            document.querySelectorAll(spanSelector).forEach(function (element) {
                element.classList.remove(...animationName.split(' '), collapse);
            });

            // apply the new style
            document.querySelectorAll(spanSelector + value).forEach(function (element) {
                element.classList.add(...animationName.split(' '));
            });
            document.querySelectorAll(spanSelector + ":not(" + value + ")").forEach(function (element) {
                element.classList.add(collapse);
            });


        });

        var authselect = document.querySelector("#authSelect");
        var authSlideSelector = ".slide-auth";

        authselect.addEventListener("change", function () {

            // var value = "." + authselect.value; // if the element is <input>
            var value = "." + authselect.options[authselect.selectedIndex].value; // if the element is <select> use this line instead

            // initiate items, by deleting last changes
            document.querySelectorAll(authSlideSelector).forEach(function (element) {
                element.classList.remove(...animationName.split(' '), collapse);
            });

            // apply the new style
            document.querySelectorAll(authSlideSelector + value).forEach(function (element) {
                element.classList.add(...animationName.split(' '));
            });
            document.querySelectorAll(authSlideSelector + ":not(" + value + ")").forEach(function (element) {
                element.classList.add(collapse);
            });


        });

    }());

OLD SOLUTION

i believe this should work, if doesn't, please provide a codepen or jsfiddle example, and i will fixe it quickly.

(function() {

    var animationName = "animated fadeInRight";
    var collapse      = "collapse";
    var animationEnd  = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";


    var select        = document.querySelector(".span-select");
    var spanSelector  = ".slide-span";

    select.addEventListener("change", function() {

        var value = "." + select.value; // if the element is <input>
        // var value = "." + select.options[select.selectedIndex].value; // if the element is <select> use this line instead

        // initiate items, by deleting last changes
        document.querySelector(spanSelector).classList.remove(animationName);
        document.querySelector(spanSelector).classList.remove(collapse);

        document.querySelector(spanSelector + value).classList.add(animationName);
        document.querySelector(spanSelector + ":not(" + value + ")").classList.add(collapse);

    });

    var authselect = document.querySelector("#authSelect");
    var authSlideSelector = ".slide-auth";

    authselect.addEventListener("change", function() {

        var value = "." + authselect.value; // if the element is <input>
        // var value = "." + authselect.options[authselect.selectedIndex].value; // if the element is <select> use this line instead

        // initiate items, by deleting last changes
        document.querySelector(authSlideSelector).classList.remove(animationName);
        document.querySelector(authSlideSelector).classList.remove(collapse);

        document.querySelector(authSlideSelector + value ).classList.add(animationName);
        document.querySelector(authSlideSelector + ":not(" + value + ")").classList.add(collapse);

    });

}());

there is a variable animationend was never used, please check also if you are providing a working example.

... as i said, a jsfiddle or codepen, would be helpful, and no time wasting. If this didn't work.

Not working as yet. I have made some fiddles. With jQuery (working): (https://jsfiddle.net/LucyI/nkaybqd2/) With your code and no jQuery: (https://jsfiddle.net/LucyI/j3cqswae/) You are correct - animationend was never used. I have commented out.
LWinchester 5 months ago
i have updated my bounty, with a working solution in jsfiddle,
Chlegou 5 months ago
Perfect, thank you! I will study your code as I try to break the jQuery habit and learn plain js. But in the mean time -- I will have more snippets to be converted tomorrow. :)
LWinchester 5 months ago
thanks for rewarding the bounty, i have created a github project to host code in it. link is mentioned in bounty. for future scripts, try to send them together, by morning, because i have plan for traveling this weekend, so i finish them all together before going.
Chlegou 5 months ago
ah thanks for the tip, i just noticed it :) , that was awesome from your part :)
Chlegou 5 months ago
Aha - I just realized it's Friday... So won't send more until Monday. Happy travels!
LWinchester 5 months ago
View Timeline