Reputation: 6986
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();
}
});
Upvotes: 3
Views: 4312
Reputation: 665584
$('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 = "";
}
});
Upvotes: 6
Reputation: 382514
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
}
}
}
}
Upvotes: 6