Good day all,

I need some help figuring this jquery puzzle. spent quite sometime trying to get this working without luck. i need to be able to pass parameters to my custom function so that they are not persistent and can be overwritten. currently it will keep the firs set of parameters passed even though I passing new ones or nothing.

here is the code for the custom function that i attached to $

$(document).ready(() => {
  $.addImage = function addImage(params) {
    'use strinct';

    const ops = params || undefined;

    let cropper;

    let avatar = document.getElementById('Avatar');

    console.log(ops);
    // 1st call is $.addImage({ isKey1: 'yes' }) => { isKey1: 'yes' } (good)
    // 2nd call $.addImage() => { isKey1: 'yes' } nope should be undefined

    // 1st call is $.addImage() => undefined (good)
    // 2nd call $.addImage({ isKey1: 'yes' }) => undefined (nope should be the object)

    // we are in certification mode, change the image sources
    if (ops && ops.isKey1 === 'yes') {
      avatar = document.getElementById(rowImgID);
    }

    // eslint-disable-next-line prefer-arrow-callback
    document.getElementById('imgSave').addEventListener('click', function () {
      let canvas;

      if (cropper) {
        // eslint-disable-next-line prefer-arrow-callback
        canvas.toBlob(function (blob) {
          let url;

          console.log(ops);
          // 1st call is $.addImage({ isKey1: 'yes' }) => { isKey1: 'yes' } good
          // 2nd call $.addImage() => { isKey1: 'yes' } nope should be undefined or null

          // 1st call is $.addImage() => undefined (good)
          // 2nd call $.addImage({ isKey1: 'yes' }) => undefined (nope should be the object)

          if (ops && ops.isKey1 === 'yes') {
            url = 'url1';
          } else {
            url = 'url2';
          }

          console.log('url:', url);

          // $.ajax({
          //   // here send blob
          //   // send other values
          //   blob,
          //   .....
          //     .....
          // })
        });
      }
    });
  };
});

and when i try to call the function twice for example

first call without param like this

  $('#btnAddAvatar').on('click', (e) => {
    e.preventDefault();
    $.addImage();
  });

and second call somewhere else in the code like this

if ($target.hasClass('addImg')) {
  const options = {
    isKey1: 'yes',
    otherKey: otherValue,
  };
  $.addImage(options);
}

in the second call the "params" object always default to the value of the first call. so in this case "params" is null therefore ops becomes null. if I call $.addImage(options) first and then call $.addImage(), the second call will have all the options when I do not want the options.