Using insertAdjacentHTML gives error in.js file but not in console snippet

Question

It works in CodePen and in console log snippet: https://codepen.io/MistaPrime/pen/ZEYLvaR

But when inserting it inside of a .js file it gives this error: Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

The objective of the code is to insert a copy of #numeric-toc contents after .rounded-block and create a new div called #sticky-numeric-toc which will hold the copy of #numeric-toc contents.


// insert sticky menu holder into the sidebar
var stickyMenu = document.querySelector('.rounded-block');
stickyMenu.insertAdjacentHTML('afterend', '<div id="sticky-numeric-toc">two</div>');

// copy-paste table of contents into sticky sidebar
document.getElementById("sticky-numeric-toc").innerHTML =
document.getElementById("numeric-toc").innerHTML;


// on scroll add fixed class to sidebar
window.addEventListener('scroll', function() {
  var elementTarget = document.getElementById('numeric-toc');
  if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
      document.querySelector('#sticky-numeric-toc').classList.add('anotherclass');
  } else {
    document.querySelector('#sticky-numeric-toc').classList.remove('anotherclass');
  }
});

<div id="numeric-toc">
THIS WILL BE CONTENT TO COPY
</div>



<div class="rounded-block">     
</div>

Basically my issue is that I cannot make this code work in the browser using a stickysidebar.js which is loaded after the contents. It works on CodePen and snippet but not once the site is launched.

Should I use something other than insertAdjacentHTML ?

Just wondering - do you assert stickyMenue or .rounded-block exists - your error points to something like this. Typo maybe? — Estradiaz, Dec 20 '19 at 22:04
The element in the sidebar will be sticky, the element `#sticky-numeric-toc` will be sticky once inserted. — MistaPrime, Dec 20 '19 at 22:07
Ye I understand - what I mean is querySelector returns element or null - if null it means .rounded-block is not existent thus typo or something. — Estradiaz, Dec 20 '19 at 22:12
@MistaPrime most likely your JS isn't loaded. See https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — Nick Parsons, Dec 21 '19 at 08:21

score 1 · Accepted Answer · answered Dec 20 '19 at 22:12

1

Your code seems to work fine as long as I add window.onload around it:

window.onload = function() {
  // your code ...
}

Gives same result as the codepen example for me. Maybe codepen does this by default before running JS?

answered Dec 20 '19 at 22:12

Lasse

651
2
8
24

Thank you for this simple solution, it has worked like a charm. You are probably right that CodePen does that automatically. – MistaPrime Dec 23 '19 at 17:08

score 1 · Answer 2 · answered Dec 20 '19 at 22:45

The issue looks to be how the file is being loaded. I tested your code with the following methods and did not receive an error. However, if I had the script tag at the top of the page I did encounter your issue.

It sounds like your javascript is being loaded before the DOM has had time to load so var stickyMenu = document.querySelector('.rounded-block'); will return null because it doesn't exist yet.

You could do a couple of things to solve this. Moving your javascript to the end of the file will allow the page to load before running the javascript.

You could also use jquery's $('document').ready(function(){}); where it will wait for the DOM to be "ready" before executing the code in the call back.

The pure JS version of this here but it's not as neat as the other 2 examples

Thanks for the explanation, it makes sense and I learned a lot. I attributed the other answer the bounty as it was pure JS and the code was ready to go. Much appreciation for your input and time, I am very grateful. — MistaPrime, Dec 23 '19 at 17:08

Using insertAdjacentHTML gives error in.js file but not in console snippet

2 Answers2