Convert show/hide element jQuery code to JavaScript

Question

I have the following bit of code that works with jQuery, which is causing a jQuery conflict that I simply can not resolve, because of the limitations of the ystsem I am working with.

<script type="text/javascript">
$(document).ready(function() {
    if (<?php echo $totalpage?> > 14) {
        $('#fpointer').show();
    }
});
</script>;

So my questions is can I convert this code to JavaScript which can run without jQuery? I think I can figure out most of it but the part I'm not sure about is the $(document).ready(function() and how that translates.

Was asked before: http://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready also http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery — Nick Russler, Dec 01 '14 at 17:30
Have you tried using [jQuery.noConflict()](http://api.jquery.com/jquery.noconflict/) ? — Rahul Desai, Dec 01 '14 at 17:31
@Naz Please reproduce your problem in jsFiddle and jsBin so we can take a look. — Rahul Desai, Dec 02 '14 at 03:55
@RahulDesai Is there any disadvantage to using javascript over resolving the jquery conflict, the solution seems to work well. — Naz, Dec 02 '14 at 19:03

score 2 · Accepted Answer · edited Dec 01 '14 at 17:37

2

I think you can do this with simple JavaScript:

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById('fpointer').style.display = 'block';
});

edited Dec 01 '14 at 17:37

ROMANIA_engineer

54,432
29
203
199

answered Dec 01 '14 at 17:35

stackrocha

405
2
8

score 1 · Answer 2 · answered Dec 01 '14 at 17:36

Before you read ahead, checkout about jQuery.noConflict().

Replacing jQuery with Javascript:

Remove $(document).ready(function()

and replace $('#fpointer').show(); with:

document.getElementById("fpointer").style.display = "inline";

So, your code should look like:

<script type="text/javascript">
    if (<?php echo $totalpage?> > 14) {
       document.getElementById("fpointer").style.display = "inline";
    }
</script>

Convert show/hide element jQuery code to JavaScript

2 Answers2