How do I write jquery script in Pure Javascript?

JavaScript
4

I’m stuck at home, so here’s another (less effective) approach.

How about when using resources that instruct us about converting jQuery to JavaScript?

Here’s the code we’re starting with:

The first thing that I see there is about selectors:
$(selector) => document.querySelector(selector)

// $('.fulldolar select[name*="test"]').attr("onChange", "australianbrother(this);");
document.querySelector('.fulldolar select[name*="test"]').attr("onChange", "australianbrother(this);");

That doesn’t work because attr isn’t valid. There are two possible approaches. One is to convert attr too, and the other is to wrap the new selector in a jQuery object. I’ll do the latter because I want to know that things still keep on working.

// document.querySelector('.fulldolar select[name*="test"]').attr("onChange", "australianbrother(this);");
$(document.querySelector('.fulldolar select[name*="test"]')).attr("onChange", "australianbrother(this);");

That partially works, but doesn’t work on second or third select lists. To get it working fully we need to use querySelectorAll instead.

// $(document.querySelector('.fulldolar select[name*="test"]')).attr("onChange", "australianbrother(this);");
$(document.querySelectorAll('.fulldolar select[name*="test"]')).attr("onChange", "australianbrother(this);");

That code now works, and we need to look now at the attr method, where we’re told:
$elem.attr('class') = 'some classes' => elem.className = 'some classes'

Applying that to the code gives us:

// $(document.querySelectorAll('.fulldolar select[name*="test"]')).attr("onChange", "australianbrother(this);");
$(document.querySelectorAll('.fulldolar select[name*="test"]')).onChange = "australianbrother(this);";

Now that doesn’t work because onChange needs to be done on a single element, so we must loop through those querySelectorAll elements:

document.querySelectorAll('.fulldolar select[name*="test"]').forEach(function (select) {
    select.onChange = "australianbrother(this);";
});

The onChange doesn’t seem to work. A deeper knowledge of JavaScript reveals that setAttribute is needed instead.

document.querySelectorAll('.fulldolar select[name*="test"]').forEach(function (select) {
    select.setAttribute("onChange", "australianbrother(this);");
});

That now works, and is now in a good position to improve the code.

Setting the onchange attribute is less reliable than adding an event listener instead:

document.querySelectorAll('.fulldolar select[name*="test"]').forEach(function (select) {
    // select.setAttribute("onChange", "australianbrother(this);");
    select.addEventListener("change", function () {
        australianbrother(this);
    });
});

And the querySelectorAll line is falling off the right side of the display, so we should use a variable to help improve that:

// document.querySelectorAll('.fulldolar select[name*="test"]').forEach(function (select) {
const selectTest = document.querySelectorAll('.fulldolar select[name*="test"]');
selectTest.forEach(function (select) {
    select.addEventListener("change", function () {
        australianbrother(this);
    });
});

In summary, conversion articles give some useful background, but are no replacement for the other techniques explored already.

The final code we have is the same as the other posts:

// document.querySelectorAll('.fulldolar select[name*="test"]').forEach(function (select) {
const selectTest = document.querySelectorAll('.fulldolar select[name*="test"]');
selectTest.forEach(function (select) {
    select.addEventListener("change", function () {
        australianbrother(this);
    });
});

Here’s the test page that I’ve been using: https://jsfiddle.net/wrhqvs2d/

4 Likes