Jquery -> vanilla javascript?

Question

I am programmer who learning jQuery javascript but never really grasped vanilla javascript (i know I am a naughty programmer). My question is how would I go about replicating this functionality in vanilla JS?

$('select').change(function() {
    if($(this).val() == "Other (please specify)") {
        $(this).parent().parent().find("input.hidden").show();
    }
});

Answer 1

This site might help !

But here's a step by step conversion:

var selects = document.getElementsByTagName('select');
for (var i=0; i<selects.length; i++) {
   selects[i].onchange = function() {
    if( this.value == "Other (please specify)") {
        var elements = this.parentNode.parentNode.getElementsByTagName("input");
        for (var j=0; j<elements.length; j++) {
           if( !elements[j].className.match(/\bhidden\b/)) continue;
           elements[j].style.display = ''; // the exact thing to do here would depend on your previous actions 
        }
    }
   }
}

Answer 2

$('select') - use document.getElementsByTagName , then loop over the returned list

.change(function() {…} - check out advanced event registration model for browser differences

$(this).val() - simply this.value ; you should use this even in jQuery

$(this).parent().parent() - get the parentNode of the element (two times)

.find("input.hidden") - this is a bit harder. You could use .querySelector [ All ] , but that does not work in legacy browsers. jQuery adds lots of sugar with its cross-browser selector engine. You might use another way to get the input element(s) that works cross-browser; you might try something along javascript document.getElementsByClassName compatibility with IE .

.show() - just remove the display:none; via el.style.display = ""; . Btw, you might just want to remove the hidden class instead of overwriting it with an inline style :-)

Real vanilla for W3-compliant browsers:

[].each.call(document.getElementsByTagName('select'), function(select) {
    select.addEventListener("change", function(e) {
        if (this.value == "Other (please specify)") {
            var inputs = this.parentNode.parentNode.querySelectorAll("input.hidden");
            for (var i=0; i<inputs.length; i++)
                inputs[i].classList.remove("hidden");
        }
    }, false);
});

This should work in older browsers, too:

(function(selects, handler) {
    if (document.addEventListener)
        for (var i=0; i<selects.length; i++)
            selects[i].addEventListener("change", handler, false);
    else
        for (var i=0; i<selects.length; i++)
            selects[i].attachEvent("onchange", handler);
})(document.getElementsByTagName('select'), function() {
    if (this.value == "Other (please specify)") {
        var inputs = this.parentNode.parentNode.getElementsByTagName("input");
        for (var i=0; i<inputs.length; i++)
            if (/\bhidden\b/.test(inputs[i].className))
                inputs[i].style.display = "";
    }
});