How to convert jQuery code to Pure JavaScript code?

Eagle Published at Dev

Eagle

I'd like to convert jQuery to Pure JavaScript but it doesn't work.

jQuery:

(document).ready(function()
{
    $(".js-all-btn").on("click", this, function()
    {
        $(this).toggleClass("active");
        $(".js-all-content").toggleClass("a-block");
    }
);
});

To Pure:

document.addEventListener("DOMContentLoaded", function()
{
    document.querySelector(".js-all-btn").on("click", this, function()
    {
        document.querySelector(this).toggleClass("active");
        document.querySelector(".js-all-content").toggleClass("a-block");
    });
});

Result: document.querySelector(...).on is not a function

As you can see unfortunately doesn't work. So, exactly how do we solve that?

As I couldn't solve the problem permanently, I asked over here and my expectation is that this problem will be solved.

nick zoum

It's safer to also check for the current readyState in case the all the load events have already fired.

If you have multiple buttons/contents you should use querySelectorAll, if you only want to get the first/single you can use querySelector.

Have a look at the following example with a bit html and css:

if (document.readyState === "complete") onLoad();
else addEventListener("load", onLoad);

function onLoad() {
  const buttons = document.querySelectorAll(".js-all-btn");
  for (const button of buttons) button.addEventListener("click", onToggleButtonClick);
}

/**
 * @this {HTMLButtonElement} the target button
 */
function onToggleButtonClick() {
  this.classList.toggle("active");

  const contents = document.querySelectorAll(".js-all-content");
  for (const content of contents) content.classList.toggle("a-block");
}

.active {
  background: red;
}

.a-block {
  background: blue;
}

<button class="js-all-btn"> Button 1 </button>
<button class="js-all-btn"> Button 2 </button>

<div class="js-all-content"> Content 1 </div>
<div class="js-all-content"> Content 2 </div>

Mostly ES5 (IE11 Compatible)

if (document.readyState === "complete") onLoad();
else addEventListener("load", onLoad);

function onLoad() {
  var buttons = document.querySelectorAll(".js-all-btn");
  for (var index = 0; index < buttons.length; index++) {
    var button = buttons[index];
    button.addEventListener("click", onToggleButtonClick);
  }
}

/**
 * @this {HTMLButtonElement} the target button
 */
function onToggleButtonClick() {
  this.classList.toggle("active");

  var contents = document.querySelectorAll(".js-all-content");
  for (var index = 0; index < contents.length; index++) {
    var content = contents[index];
    content.classList.toggle("a-block");
  }
}

.active {
  background: red;
}

.a-block {
  background: blue;
}

<button class="js-all-btn"> Button 1 </button>
<button class="js-all-btn"> Button 2 </button>

<div class="js-all-content"> Content 1 </div>
<div class="js-all-content"> Content 2 </div>

If you need to support an older version of IE you might have to add a polyfill for classList.toggle

Collected from the Internet

Please contact [email protected] to delete if infringement.