Syntax question when testing an element name in javascript

Question

I have some lines of Javascript in my view, as follows:

let dropzoneElement1 = document.querySelector((".dz1");

updateThumbnail(dropzoneElement1);

let dropzoneElement2 = document.querySelector((".dz2");

updateThumbnail(dropzoneElement2);

function updateThumbnail(dzElementParm) {

...

}

What is the syntax to test the name in dzElementParm? For example,

if (dzElementParm = "dz1") { do stuff }

else if (dzElementParm = "dz2") { do something different }

Im trying to do different things depending on which dropzoneElement (1 or 2) was passed.

In my test, this line didn't work:

if (dzElementParm = dropzoneElement1) { do stuff }

Answer 1

Couple of ways to solve this but since your selector is looking for elements with a specific CSS class then why not just do that inside the function as well.

function updateThumbnail ( element ) {
   if (element.hasClass("dz1")) {  
   } else {
   }
}

Of course if the function is going to handle that then really you should just query the DOM once to get all the elements (both dz1 and dz2, preferably using a separate CSS class that is applied to both. Then enumerate the elements and call your helper function on each one.

Alternatively if you only expect to ever have 1 of each then grab them both and pass them to the same function.

let dropzoneElement1 = document.querySelector((".dz1");
let dropzoneElement2 = document.querySelector((".dz2");

updateThumbnail(dropzoneElement1, dropzoneElement2);

function updateThumbnail ( element1, element2 ) {
   //element1 is dz1
   //element2 is dz2
}

Another approach is to simply pass what you already know as part of the arguments.

let dropzoneElement1 = document.querySelector((".dz1");
updateThumbnail(dropzoneElement1, "dz1");

let dropzoneElement2 = document.querySelector((".dz2");
updateThumbnail(dropzoneElement2, "dz2");

function updateThumbnail ( element1, elementType ) {
   if (elementType === 'dz1') {
   } else if (elementType === 'dz2') {
   }
}