JS Изменение функции работает только в первый раз

Question

В этом у меня есть модуль Give (плагин WordPress для сборщика средств), и я интегрировал загрузку файла

https://www.mamafrica.it/26964-2/

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

Например: после загрузки страницы, если я загружаю файл> 500 КБ или отличается от pdf или JPG, сообщение об ошибке появляется в области загрузки файла. Если я переключусь на «Пожертвование банковским переводом», форма изменится (информационный текст появляется перед областью загрузки файла, и поля формы очищаются). Теперь, если я выберу другой файл> 500 КБ (или не PDF или JPG), сообщение об ошибке не появится. Функция 'change' в javascript не вызывается.

Это javascript

    <script>
var inputElement = document.getElementById("fileToUpload")

inputElement.addEventListener('change', function(){
alert("QUI");
  var error = 0;
  var fileLimit = 500; // In kb
  var files = inputElement.files; 
  var fileSize = files[0].size; 
  var fileSizeInKB = (fileSize/1024); // this would be in kilobytes defaults to bytes
  var fileName = inputElement.value;
  idxDot = fileName.lastIndexOf(".") + 1;
  extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
  document.getElementById("error").innerHTML = "";
  document.getElementById("filenamecheck").innerHTML = inputElement.value; 

  if (extFile=="jpg" || extFile=="pdf"){
     console.log("Type ok");
  } else {
     error = 1;
     document.getElementById("error").innerHTML = "Solo file .pdf o .jpg";
     document.getElementById("fileToUpload").value = "";
  }
  if (error == 0) {
  if(fileSizeInKB < fileLimit) {
     console.log("Size ok");
  } else {
     console.log("Size not ok");
     document.getElementById("error").innerHTML =  "Massima grandezza file: " + fileLimit + "KB";
     document.getElementById("fileToUpload").value = "";
  }
}
})
</script>

Это область загрузки файла

 <div class="file-uploader">
    <input id="fileToUpload" name="fileToUpload" type="file" accept=".pdf,.jpg"/>
    <label for="file-upload" class="custom-file-upload">
        <i class="fas fa-cloud-upload-alt"></i>Clicca per scegliere il file     
          <span name="filenamecheck" id="filenamecheck">test</span>

    </label>
    <p id="error" style="color: #c00000"></p>
</div>

Кто-то можете мне помочь?

ОБНОВЛЕНИЕ: правильный URL-адрес https://www.mamafrica.it/26964-2/

ОБНОВЛЕНИЕ РЕШЕНИЕ Я нашел решение для моей проблемы !! В первый раз я вставляю код javascript после тега конца формы, а refre sh работает только с элементами внутри тега формы. Используя перехват WordPress (в функции. php), я вставил код javascrip сразу после тега ввода, внутри тега формы, таким образом, форма refre sh, перезагрузите также javascript. Спасибо всем!

С уважением, Марко

Answer 1

ОБНОВЛЕНИЕ Я нашел решение для моей проблемы! В первый раз я вставляю код javascript после тега конца формы, а refre sh работает только с элементами внутри тега формы. Используя перехват WordPress (в функции. php), я вставил код javascrip сразу после тега ввода, внутри тега формы, таким образом, форма refre sh, перезагрузите также javascript.

Спасибо всем!

Answer 2

Возможно, вы используете:
inputElement.addEventListener

Это может быть вызвано только один раз.

Вы можете использовать что-то в форме просто:
onSubmit = "return MyFunctionName"

Это используется в проверке формы годами.

Надеюсь, это поможет, Рамон