convert jquery code to javascript

Question

I have a jquery script that i want to convert in javascript.

Jquery:

<script type="text/javascript">
 $(document).ready( function() {
 addCssTransform();
 $( window ).resize(function() {
 addCssTransform();
 });
 function addCssTransform() {
 var docWid = $(document).width();
 var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
 var actualWidth = w - (w - docWid);
 var zoom = actualWidth / 1280;
 var zoomRatio = zoom *100;
 console.log(zoomRatio);
 if(actualWidth > 1280) {
 $('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */
 }
 }
 });
</script> 

I have tried and here is the output. But it is not working and giving error in console.

javascript:

<script type="text/javascript">
 addCssTransform();
 window.addEventListener('resize', function(event){
 addCssTransform();
 });
 function addCssTransform() {
 var docWid = document.body.clientWidth;
 var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
 var actualWidth = w - (w - docWid);
 var zoom = actualWidth / 1280;
 var zoomRatio = zoom *100;
 console.log(zoomRatio);
 if(actualWidth > 1280) {
 document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';
 //$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */
 }
 };
 </script>

It seems there is an error in line:

document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';

• Vigneswaran Marimuthu: You should add 'DOMContentLoaded' event. Just like jQuery document ready
• maja: What's the error you get?
• mplungjan: document.getElementsByTagName("html").style.fontSize should be document.getElementsByTagName("html")[0].style.fontSize or loop over document.querySelectorAll("*")
• Andy: Is it because getElementsByTagName returns a nodelist? I think it is. Do as mplungjan suggests.
• Vigneswaran Marimuthu: document.getElementsByTagName("html") can be written as document.documentElement

Answer 1

getElementsByTagName returns an array-like NodeList object, not an element. You can't set style on it. You have to loop over it and set the style on each member (which will be elements) of it in turn.

Answer 2

<script type="text/javascript">
 // Add 'DOMContentLoaded' event
 document.addEventListener('DOMContentLoaded', function () {
 addCssTransform();
 // NOTE: Just reference the function. Don't create new one unless needed
 window.addEventListener('resize', addCssTransform, false);
 function addCssTransform() {
 var docWid = document.body.clientWidth;
 var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
 var actualWidth = w - (w - docWid);
 var zoom = actualWidth / 1280;
 var zoomRatio = zoom *100;
 console.log(zoomRatio);
 if(actualWidth > 1280) {
 // If you are adding styles to 'html' element, use available 'document.documentElement' property
 document.documentElement.style.fontSize = zoomRatio + '%';
 //$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */
 }
 }
 }, false);
 </script>

• Add DOMContentLoaded event and place your JavaScript inside it.
• Reference the function.

You can write the below code

window.addEventListener('resize', function (event) {
 addCssTransform();
}, false);

as

window.addEventListener('resize', addCssTransform, false);

• Use document.documentElement to access 'html' element

Answer 3

You are calling the addCSSTransform function before it is defined. Move the call to after the function declaration, i.e:

 window.addEventListener('resize', function(event){
 addCssTransform();
 });
 function addCssTransform() {
 var docWid = document.body.clientWidth;
 var w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
 var actualWidth = w - (w - docWid);
 var zoom = actualWidth / 1280;
 var zoomRatio = zoom *100;
 console.log(zoomRatio);
 if(actualWidth > 1280) {
 document.getElementsByTagName("html").style.fontSize = zoomRatio + '%';
 //$('html').css( 'font-size', + zoomRatio+ '%' ); /* IE 9 */
 }
 };
 addCssTransform();

as suggested by Vigneswaran, you may wish to bind the call to a DOMContentLoaded event (equivalent to $(document).ready) as follows:

document.addEventListener('DOMContentLoaded', addCssTransform);

The suggestions above regarding nodeLists returned from getElementsByTagName are also correct (the clue's in the name - getElementsByTagName). There will (or should!) only ever be one html element, so you can safely replace document.getElementsByTagName("html").style with document.getElementsByTagName("html")[0].style

Answer 4

getElementsByTagName returns an nodeList over which you would need to loop.

An alternative would be to use querySelector which returns a single element instead:

document.querySelector('html');