JS更改功能仅第一次工作

Question

在此，我有一个捐赠模块（用于筹款活动的 wordpress 插件），并且我已经集成了文件上传

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

我添加了一个 java 脚本来检查文件大小和文件类型，但这仅在我不更改付款方式之前有效。

例如： 加载页面后，如果我加载的文件 > 500KB 或与 pdf 或 jpg 不同，文件上传区域下方会出现错误消息。 如果我切换到“通过银行转账捐款”，表格会发生变化（文件上传区域之前会出现信息文本，并且表格字段正在清理）。 现在，如果我选择另一个 > 500KB 的文件（或者不是 pdf 或 jpg），则不会出现错误消息。 javascript中的'change'函数没有被调用。

这是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>

有人可以帮助我吗？

更新：正确的网址是https://www.mamafrica.it/26964-2/

更新解决 我找到了解决我的问题的方法！！ 第一次，我在表单标签的末尾插入了 javascript 代码，并且刷新只对表单标签内的元素起作用。 使用 wordpress 钩子（在 function.php 中），我在输入标签之后立即插入了 javascrip 代码，在表单标签内，这样，表单刷新，也重新加载了 javascript。 谢谢大家！

问候， 马可

Answer 1

更新 我找到了解决我的问题的方法！！ 第一次，我在表单标签的末尾插入了 javascript 代码，并且刷新只对表单标签内的元素起作用。使用 wordpress 钩子（在 function.php 中），我在输入标签之后立即插入了 javascrip 代码，在表单标签内，这样，表单刷新，也重新加载了 javascript。

谢谢大家！

Answer 2

可能是您正在使用：
inputElement.addEventListener

这可能只触发一次。

您可以使用以下简单的形式：
onSubmit="return MyFunctionName"

多年来一直在表单验证中使用它。

我希望这会有所帮助， 拉蒙