[SOLVED] JS .addEventListener() for Drag & Drop

Anvil Q&A
1

I’m trying to implement some custom JS to allow for drag and drop files in a form and I’m wondering if anyone out there has some guidance. Right now I’m trying to use .addEventListener() to listen to dragover, dragleave, and similar. The function looks roughly like this:

function init() {
  var filedrag = document.getElementsByClassName("anvil-role-drag");
  filedrag.addEventListener("mouseenter", TestFunction);
}

But, when I run this function using .call_js(), I get the following error:

ExternalError: TypeError: filedrag.addEventListener is not a function Main, line 23

I can verify that filedrag does contain the appropriate number of items, so is .addEventListener() not an option at the moment? I have probably a grand total of four hours of JS experience, so the likelihood I’m making a mistake is high. All I can say is that I’m emulating existing JS code that works on another website. Thoughts?

2

As it happens, I was making an error. var filedrag produces an iterator that .addEventListener() doesn’t work on. I’ve modified to using JQuery and the .on() statement, and now everything works :).

1 Like
3

I see you got there yourself! document.getElementsByClassName() returns an array of elements, not a single element. jQuery is probably the right way to go there :slight_smile:

1 Like