Rewrite simple jQuery to pure JS doesn't work. Why?

Question

In my new project I have to do some content without jQuery. I have this jQuery code:

$(document).ready(function() {
  maxHeight = $("#container").height();
  lastSize = 9;
  while($("#content").height()<maxHeight && lastSize < 1000)
  {
      lastSize++;
    $("#content").css("font-size", lastSize);
  }
  lastSize--;
  $("#content").css("font-size", lastSize);
});

I'm trying to rewrite it in pure JavaScript, using this tutorial, but it hasn't worked properly :/ Here is what I got so far:

document.addEventListener('DOMContentLoaded', function() {
  maxHeight = document.getElementById('container').clientHeight;
  lastSize = 9;
  while(document.getElementById('content').clientHeight<maxHeight && lastSize < 1000)
  {
      lastSize++;
    document.getElementById('content').style.fontSize=lastSize;
  }
  lastSize--;
  document.getElementById('content').style.fontSize=lastSize;
});

What's wrong with my code?

Why? Because something was ported/converted incorrectly or incompletely .. consider posting the *minimal* isolated code that does not work correctly, along with the original jQuery. (I am not going to follow those external links.) — user2246674, Sep 11 '13 at 19:26
How much are you going to pay us to do your homework for you? — Andy, Sep 11 '13 at 19:28
We expect you to let us know what you have tried before asking us for help. It sounds like you have tried somethings (which is encouraging) but it doesn't really help us narrow down to you issue. Things you can do, are make the changes you think need to be changed, for example changing all the `$("#whatever")` to `document.getElementbyId`, and then telling us what errors you are left with when you run it without jQuery. — Jordan, Sep 11 '13 at 19:28
I'm not allowed to do it with jQuery. I think it is rewritable to JS, but my translation doesn't do, what it has to. — user2737935, Sep 11 '13 at 19:30

score 3 · Answer 1 · edited May 23 '17 at 12:05

3

Let me see usage by usage:

1) $(document).ready(f) {}

Replace this by the instructions in this post

2) Getting an element by ID

maxHeight = $("#container").height();

you can replace for:

document.getElementById('container').height;

If height is not what you want investigate clientHeight, offsetHeight, etc.

3) Changing a CSS style with JS only

document.getElementById("content").style.fontSize="100";

instead of your

$("#content").css("font-size", lastSize);

Hope this helps, start small, try 2) and 3) first and then 1) if you succeed the other ones.

edited May 23 '17 at 12:05

Community

1
1

answered Sep 11 '13 at 19:31

bitoiu

5,698
5
33
50

I tried your tips, but it still doesn't do that right. But thanks to you I know, that it doesn't depend on the "$(document).ready()" translation, because I've tried many code snippets or frameworks (not only yours, but mainly yours), but everytime it has the same output. – user2737935 Sep 11 '13 at 19:53
This the other scenarios 2) and 3) worked? You can failsafe for a simple onload but that is not 100% reliable. – bitoiu Sep 11 '13 at 20:32
Yes, 2) and 3) works great, but 1) is one of many, which doesn't work for this case. Sorry for the first comment, it could be confusing – user2737935 Sep 11 '13 at 20:36

score 3 · Accepted Answer · answered Sep 11 '13 at 19:49

SOLVED

Please don't forget that jquery cares for cross browser compatibility.

http://jsbin.com/opuzur/51/edit

document.addEventListener('readystatechange', function(){
  if(document.readyState != "complete") return;
  container = document.getElementById('container');
  content = document.getElementById('content');
  maxHeight = container.offsetHeight;
  lastSize = 9;
  while(content.offsetHeight < maxHeight){
    content.style['font-size'] = lastSize + 'px';
    lastSize++;
  }
});

Works perfect, thank you :) – user2737935 Sep 11 '13 at 19:56 — user2737935, Sep 11 '13 at 19:56

Rewrite simple jQuery to pure JS doesn't work. Why?

2 Answers2