How do I write jquery script in Pure Javascript?

How do I write jquery script in Pure Javascript?

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$('.fulldolar select[name*="test"]').attr("onChange", "australianbrother(this);");
</script>

Let’s do this so that you can convert it gradually, with everything still working throughout the process.

The dollar symbol is to retrieve elements based on the selector.

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

And, instead of setting the onChange attribute, it’s more appropriate to use jQuery’s on method:

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

We can now more easily convert that to pure javascript.

jQuery automatically handles looping through each of the selectTest elements. We need to more manually do that instead.

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

Now that the jQuery on method is being done on single elements at a time, we can easily convert that to pure JavaScript.

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

and all jQuery has now been removed from that code.

The final converted code is:

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

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

2 Likes

Approaching this another way, can make it easier to do the work with less brain power.

First I’ll break up the chained code so that it uses separate variable names instead:

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

Then I’ll work backwards, from the end towards the front, doing the conversion. The reason for doing it backwards instead of forwards, is that forwards results in latter code being affected by your change, whereas backwards leaves the earlier code unaffected.

So going backwards, the onchange is done first:

selectTest is multiple jQuery elements, so we use a loop to work on single elements instead:

const selectTest = $('.fulldolar select[name*="test"]');
// selectTest.attr("onChange", "australianbrother(this);");
selectTest.each(function (index, select) {
    $(select).("onChange", "australianbrother(this);");
});

We can now convert that onchange code:

const selectTest = $('.fulldolar select[name*="test"]');
// selectTest.attr("onChange", "australianbrother(this);");
selectTest.each(function (index, select) {
    // $(select).("onChange", "australianbrother(this);");
    select.addEventListener("change", function () {
        australianbrother(this);
    });
});

The jQuery each is next to be converted. We can convert the jQuery collection to an array instead, and loop over that.

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

And lastly, we can use querySelectorAll to get an array-like collection of elements:
Because it’s already an array-like collection, we don’t need toArray there anymore.

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

And the jQuery code is converted to pure JavaScript once more.

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/

2 Likes

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

Thank you very much for replying :). Thanks to your I got it right!

const selectTest = document.querySelectorAll('.fulldolar select[name*="test"]');
selectTest.forEach(function (select) {
    select.setAttribute("ok", "ok");
});
1 Like