JS error help

#1

I’m working on a project locally. Unpublished just yet and the JS is a bit beyond my skill level. I think I have gotten it to work for the most part. It is designed to allow drag and drop of certain elements on my html doc.

JavaScript

function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);
  event
    .currentTarget
    .style
    .backgroundColor = 'yellow';
}

function onDragOver(event) {
  event.preventDefault();
}

function onDrop(event) {
  const id = event
    .dataTransfer
    .getData('text');
  const draggableElement = document.getElementById(id);
  const completed = event.target;
  completed.appendChild(draggableElement);
  event
    .dataTransfer
    .clearData();
}

So far as I can tell the script is running properly, but when I ‘drop’ the element it gives me this error:

Screen Shot 2019-12-21 at 1.06.12 AM
Screen Shot 2019-12-21 at 1.06.12 AM745×297 34.2 KB

‘g’ is the id of the element I’m trying to drop. Is this just happening because it is an unpublished page working locally on my computer? Or have I bungled some part of the code. As I said this is a bit beyond my skill level. A lot of my learning has been via trial and error, so any help is appreciated.