How can i convert jQuery into pure JavaScript ?

Question

is there online resource to convert jQuery into JavaScript ?

Can anyone convert this below code for instance

$('.trigger').on('click', function(){
$(this).toggleClass('clicked');
});

Answer 1

For all the same class element triggering, we need querySelectorAll function to include all elements, and set each event listener separately.

var triggers = document.querySelectorAll('.trigger');
triggers.forEach(t=>t.addEventListener('click', ()=> t.classList.toggle('clicked') , false));
https://code.sololearn.com/WbACFhqjJ5I0/?ref=app

So this is why jQuery is most convenient, but also more time consuming when running a simple class trigger, for me, i rather stick to pure js which is more verbose but yet more code efficient in term of faster execution.

Don't forget also, we need to load all the jQuery lib, before we could use the jQuery on function.

For js code execution speed comparison, please check out this code.
https://code.sololearn.com/Wu20kv75u57T/?ref=app

Answer 2

Vasiliy jay Aditya Khandelwal Your answer is partially correct.
Since $('.trigger').on could be triggered from all the same class elements.

Whereas your js only triggered by the first class element.

https://code.sololearn.com/W1y1rHcxASRP/?ref=app

Answer 3

thanks Calviղ the answers of jay and Aditya Khandelwal wasn't running but Vasiliy code was running fine.

Answer 4

Mellifluous🛡️ ,
jay and Aditya Khandelwal codes are working well in your case, for only one class element. The only reason thare are not working on your phone, may be due to your phone browser not support ES6. In that case, my code also not working on your phone too, since it consists of arrow and for Each functions.

I wonder how long it would take for es6 could fully support all phones wirhout compatibility issue. Lol..

Thank you Gordon , another great code to illustrate the solution. Your code is not using es6, I think would be no issue to run on @Mellifluous's phone.

Answer 5

Hey jay Aditya Khandelwal it's not working

Answer 6

Thanks Vasiliy it's working 👍👍

Answer 7

var arr = document. getElementsByClassName('trigger');
arr[0].onclick = function() {
this.classList.toggle('clicked');
}
Supplement for Calviղ:
I decided it was easy to think of driving the array through the loop☺👇
https://code.sololearn.com/WcpqWngj9h4u/?ref=app

Answer 8

Mellifluous🛡️ you don't understand Calvin because you didn't debug that out because you test with one trigger only. Vasiliy only assigns to arr[0] the first element with class name. You will notice that the second to last are all not added event listener

Should use for loop. If getElementsByClassName

This is a slight modification on Calviղ 's code on how to do it using getElementsByClassName
https://code.sololearn.com/WVcuIlL5uHBU/?ref=app

Take note of what I highlight with console log:
Note 1 : use length property for for loop
Note 2 : notice the difference in datatype : nodelist vs htmlcollections

Answer 9

Тимофей Кочергин actually hola

Answer 10

let btn = document.querySelector(".trigger")

btn.addEventListener("click", () => {
this.classList.toggle("clicked")
})

Answer 11

Hello

Answer 12

I created this free tool to help people as I ran into this in another project. I just wanted to share it.
https://properprogramming.com/jquery-to-javascript-converter/