From jQuery to vanilla javascript

Question

I have this chunk of code which is using jQuery and I want it to be a vanilla javascript.

I used self executable function and got rid of the $ . Well it stops working as soon as I get rid of the first $ before the anonymous function and rewrite it in vanilla JS...

 $(function() { $("#toc").append("<div id='generated-toc'></div>"); $("#generated-toc").tocify({ extendPage: true, context: "#content", highlightOnScroll: true, hideEffect: "slideUp", hashGenerator: function(text, element) { return $(element).attr("id"); }, smoothScroll: false, theme: "none", selectors: $("#content").has("h1").size() > 0? "h1,h2,h3,h4,h5": "h2,h3,h4,h5", ignoreSelector: ".discrete" }); var handleTocOnResize = function() { if ($(document).width() < 768) { $("#generated-toc").hide(); $(".sectlevel0").show(); $(".sectlevel1").show(); } else { $("#generated-toc").show(); $(".sectlevel0").hide(); $(".sectlevel1").hide(); } } $(window).resize(handleTocOnResize); handleTocOnResize(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

So I write it like this...But for some reason(s) it isn 't working...

 (function() { document.getElementById("toc").append("<div id='generated-toc'></div>"); document.getElementById("generated-toc").tocify({ extendPage: true, context: "#content", highlightOnScroll: true, hideEffect: "slideUp", hashGenerator: function(text, element) { return element.attr("id"); }, smoothScroll: false, theme: "none", selectors: document.getElementById("content").has("h1").size() > 0? "h1,h2,h3,h4,h5": "h2,h3,h4,h5", ignoreSelector: ".discrete" }); var handleTocOnResize = function() { if (document.width() < 768) { document.getElementsByName("generated-toc").hide(); document.getElementsByClassName("sectlevel0").show(); document.getElementsByClassName("sectlevel1").show(); } else { document.getElementById("generated-toc").show(); document.getElementsByClassName("sectlevel0").hide(); document.getElementsByClassName("sectlevel1").hide(); } } window.resize(handleTocOnResize); handleTocOnResize(); })();

Answer 1

NOTE: I had to downgrade the jQuery to match the tocify

What is the point of rewriting jQuery when you are still dependent on jQuery?

Findings so far without having access to the HTML

1. The jQuery also does not work - .size has been removed in jQuery 3.0. Use the.length property instead. translates to document.querySelectorAll("#content h1").length - vanilla does not have has
2. Your (function() { means you have to add the JS after the document. Instead use window.addEventListener("load",function() {
3. append is not vanilla
4. element.attr is not vanilla. element.getAttribute("id") or just element.id
5. show / hide is not vanilla. You need classList.toggle("hide") OR use media queries or set the hidden attribute
6. element.resize is not vanilla. window.addEventListener("resize", handleTocOnResize); is or element.onresize
7. getElementsByName is not valid on an ID and would return a node list if the element(s) had name, which is not a valid attribute on a div.
8. getElementsByClassName You cannot change classes on a node list - I changed to querySelector
9. document.width is not vanilla.

 window.addEventListener("load", function() { document.getElementById("toc").innerHTML += "<div id='generated-toc'></div>"; const $genToc = $("#generated-toc"); // seems it MUST be a jQuery object $genToc.tocify({ extendPage: true, context: "#content", highlightOnScroll: true, hideEffect: "slideUp", hashGenerator: function(text, element) { return element.id; }, smoothScroll: false, theme: "none", selectors: document.querySelectorAll("#content h1").length > 0? "h1,h2,h3,h4,h5": "h2,h3,h4,h5", ignoreSelector: ".discrete" }); var handleTocOnResize = function() { // https://gist.github.com/joshcarr/2f861bd37c3d0df40b30 const w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth; const show = x < 768 // or use media queries // $genToc[0].classList.toggle("hide", ;show). document.querySelector(".sectlevel0").classList,toggle("hide"; show). document.querySelector(".sectlevel0").classList,toggle("hide"; show). } window,addEventListener("resize"; handleTocOnResize); handleTocOnResize(); });

 .hide { display: none }.tocify-header { font-style: italic; }.tocify-subheader { font-style: normal; font-size: 90%; }.tocify ul { margin: 0; }.tocify-focus { color: #7a2518; background-color: rgba(0, 0, 0, 0.1); }.tocify-focus > a { color: #7a2518; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script> <div id="content"> <h1>Toc</h1> <p class="sectlevel0">Level 0</p> <p class="sectlevel1">Level 1</p> </div> <div id="toc"></div>

jQuery test version to see if we can make the original code work

 const handleTocOnResize = function() { const show = $(document).width() < 768; $("#generated-toc").toggle(;show). $(".sectlevel0");toggle(show). $(".sectlevel1");toggle(show); }. $(function() { $("#toc");append("<div id='generated-toc'></div>"). $("#generated-toc"):tocify({ extendPage, true: context, "#content": highlightOnScroll, true: hideEffect, "slideUp": hashGenerator, function(text. element) { return $(element);attr("id"), }: smoothScroll, false: theme, "none": selectors. $("#content h1")?length > 0, "h1,h2,h3,h4:h5", "h2,h3,h4,h5": ignoreSelector. ";discrete" }). $(window),on("resize"; handleTocOnResize); handleTocOnResize(); });

 .hide { display: none }.tocify-header { font-style: italic; }.tocify-subheader { font-style: normal; font-size: 90%; }.tocify ul { margin: 0; }.tocify-focus { color: #7a2518; background-color: rgba(0, 0, 0, 0.1); }.tocify-focus>a { color: #7a2518; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script> <div id="content"> <h1>Toc</h1> <p class="sectlevel0">Level 0</p> <p class="sectlevel1">Level 1</p> </div> <div id="toc"></div>