Javascript Equivalent of Jquery

Question

I am having problem in converting jquery to javascript as my application requirement is not to use jquery and only in plain html and javascript. I know how to write the code in Jquery but unable to convert it in javascript. My code is as follows

 $(document).ready(function () {
  $('input[type="button"').click(function () {
     $(this).prop('disabled','disabled');
   });
 });

How to convert this code snippet to javascript.

Note that `$(this).prop('disabled','disabled');` is too much jQuery even when you are using jQuery in a general sense: saying `this.disabled=true` is more efficient *and* easier to read. — nnnnnn, May 05 '16 at 08:39
Further to what @nnnnnn said - even if you were going to use jQuery you should be setting the property to `true` rather than `'disabled'`..remember that `.prop` sets a property's value on a DOM element, rather than modifying an HTML attribute as per `.attr` — Andy, May 05 '16 at 10:18

score 7 · Answer 1 · edited May 23 '17 at 11:59

7

Use window.onload to handle load-event on the window
document.querySelectorAll to select list of the elements within the document that match the specified group of selectors.
[].forEach.call to iterate through selected elements.
addEventListener to register the specified listener on the element.

window.onload = function() {
  var elems = document.querySelectorAll('input[type="button"]');
  [].forEach.call(elems, function(el) {
    el.addEventListener('click', function() {
      this.disabled = true;
    });
  });
};

Edit: document.addEventListener('DOMContentLoaded', function () {}); could be used instead of window.onload but consider Browser compatibility as well. Another easier alternate would be to place your <script> as last-child of <body> without wrapping your script in any load handler.

edited May 23 '17 at 11:59

Community

1
1

answered May 05 '16 at 07:22

Rayon

36,219
4
49
76

+1 You can suggest using `document.addEventListener("DOMContentLoaded", function(event){ });` instead of `window.onload`. Because `$(document).ready` is entirely different from `window.onload` – Rajaprabhu Aravindasamy May 05 '16 at 07:23
@RajaprabhuAravindasamy, That is what came in my mind first but someone suggested me to consider [__Browser compatibility__](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded#Browser_compatibility) – Rayon May 05 '16 at 07:25
Neither window load nor DOMContentLoaded are a direct replacement for jQuery's ready() handler, but at least using the load event avoids having to jump through hoops to support older browsers. – nnnnnn May 05 '16 at 07:37
@Andy, [Filip](http://stackoverflow.com/users/44041/filip-dupanovi%C4%87) did edit it.. Thank you :) – Rayon May 05 '16 at 08:15
Also, you missed the `$(this).prop('disabled','disabled');` part. – Andy May 05 '16 at 08:16
1

@Andy, That was added later in [question](http://stackoverflow.com/posts/37044746/revisions).. Have updated the answer.. – Rayon May 05 '16 at 08:20
I'm not sure why you used `window.onload` over the `DOMContentLoaded` event because of browser compatibility, but then used `querySelectorAll`? – Andy May 05 '16 at 08:47
Quiet valid! `DOMContentLoaded` is supported since `IE9` but `querySelectorAll` sould be used since `IE8`.. Not sure OP is considering ` – Rayon May 05 '16 at 09:32
I didn't realise `querySelectorAll` was available in IE8, thanks for the info :) – Andy May 05 '16 at 09:36

Hulke · Accepted Answer · 2016-05-05T08:26:48.187

4

Use the DOMContentLoaded event as follow:

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
  var btns = document.querySelectorAll("input[type=button]");
  for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      //Do stuff
      console.log("button" + i +  "clicked");
    });
  }
});

edited May 05 '16 at 08:26

answered May 05 '16 at 07:24

Hulke

847
5
22

`querySelector` will select only one element! – Rayon May 05 '16 at 07:27
A node collection doesn't have a `forEach` method. – Andy May 05 '16 at 08:12
What about the `$(this).prop('disabled','disabled');` part? – Andy May 05 '16 at 08:16

Javascript Equivalent of Jquery

2 Answers2