Please convert this jQuery code to Vanilla Javascript

Question

User-1165293366 posted

jQuery code is :

$('.currency,.excludeCurrency').each(function () {
    new AutoNumeric(this, { allowDecimalPadding: "floats", modifyValueOnWheel: false });
});

Answer 1

User753101303 posted

Hi,

Try https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ that perhaps point to the issue you had when trying ?

If you need further help please tell what you tried and what happens.

Answer 2

User-893317190 posted

Hi spidergrey.emad,

You could write your code as follows.

 var cArray= document.getElementsByClassName("currency");
             var eArray = document.getElementsByClassName("excludeCurrency");
         
             Array.prototype.forEach.call(cArray, function (currentValue,index,arr) {

                    new AutoNumeric(currentValue, { allowDecimalPadding: "floats", modifyValueOnWheel: false });
             })
               Array.prototype.forEach.call(eArray, function (currentValue,index,arr) {

                  new AutoNumeric(currentValue, { allowDecimalPadding: "floats", modifyValueOnWheel: false });
             })

As you could see , it is  more complex than jquery. Because  javascript's forEach method couldn't apply to  dom array which is different from real array like [1,2,3].

So you should use Array.prototype.forEach.call method to make the method apply to dom array. 

If you are not familiar with  Function.prototype.call method , you will be confused.

If so, please refer to mdn for more information about  Function.prototype.call and similar method Function.prototype.apply.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

One more thing , using raw javascript means you should deal with compatibility on your own.

So some methods in javascript may not work in some browsers.

Best regards,

Ackerly Xu