Как передать текущий элемент в функцию из HTML-файла

Question

Я пытаюсь повторно использовать функцию для разных элементов, есть ли способ, которым я могу использовать свой код для замены различных элементов ввода. Передача этого ключевого слова или сохранение пустых параметров не помогает

function checksize() {
  if (this.files[0].size > 2097152) {
    alert("File is too big!");
    this.value = "";
    this.className = "is-invalid form-control-file";
  } else {
    this.className = "form-control-file"
  };
}

<input onchange="checksize(this)" required accept=".jpg, .pdf, .jpg, .jpeg, .png" id="idfile" class="form-control-file" type="file" name="idfile">

Answer 1

Получить переданный аргумент в функции:

function checksize(that) {
  if (that.files[0].size > 2097152) {
    alert("File is too big!");
    that.value = "";
    that.className = "is-invalid form-control-file";
  } else {
    that.className = "form-control-file"
  };
}

<input onchange="checksize(this)" required accept=".jpg, .pdf, .jpg, .jpeg, .png" id="idfile" class="form-control-file" type="file" name="idfile">

Или вместо определения события в HTML вы можете добавить его динамически, используя:

document.getElementById('idfile').addEventListener('change', checksize);

и используйте вашу функцию (используя ключевое слово this):

document.getElementById('idfile').addEventListener('change', checksize);

function checksize() {
  if (this.files[0].size > 2097152) {
    alert("File is too big!");
    this.value = "";
    this.className = "is-invalid form-control-file";
  } else {
    this.className = "form-control-file"
  };
}

<input required accept=".jpg, .pdf, .jpg, .jpeg, .png" id="idfile" class="form-control-file" type="file" name="idfile">

Answer 2

Вы можете bind this с call или apply:

<input onchange="checksize.call(this)" required  accept=".jpg, .pdf, .jpg, .jpeg, png" id="idfile" class="form-control-file" type="file" name="idfile">

Answer 3

Если вы хотите использовать this. Это, наверное, самый простой способ.

document.querySelectorAll("input[type='file']").forEach(function(input) {
  input.addEventListener("click", function() {
    checksize.call(input);
  });
});

function checksize() {
  console.log(this.id);
}

<input id="idfile1" type="file">
<input id="idfile2" type="file">
<input id="idfile3" type="file">

Если вы хотите использовать jQuery, вы можете сделать это:

$("input[type='file']").on("click", checksize);

function checksize() {
  console.log(this.id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="idfile1" type="file">
<input id="idfile2" type="file">
<input id="idfile3" type="file">

Answer 4

function checksize(event){
    // use event to read ll files and read and write the element properties
    if(this.files[0].size > 2097152){
    alert("File is too big!");
    this.value = "";
    this.className = "is-invalid form-control-file";
    }else{
        this.className = "form-control-file"
    };
}