Javascript 内联脚本 onchange 不起作用

Question

我在让我的代码调整到我的 web 服务器时遇到问题，出于安全目的，我的 html 的所有内联 javascript 代码都是不允许的。

一切都已经好了我只是很难将我的其他代码转换为纯 javascript

这是我现有的代码，，，

<label class=qrcode-text-btn><input type=file accept="image/*" capture=environment id="openQRCamera" tabindex=-1></label>

原始代码是这样的

<label class=qrcode-text-btn><input type=file accept="image/*" capture=environment onchange="openQRCamera(this);" tabindex=-1></label> 

onchange不起作用，因为它在 html 中内联。

这个function需要打开摄像头检测是否有qr存在。

这就是我现在对它的转换。

document.querySelector("#openQRCamera").addEventListener('onchange', (node) => {

      var reader = new FileReader();
      reader.onload = function() {
        node.value = "";
        qrcode.callback = function(res) {
         if(res instanceof Error) {
           alert("There is no QR detected");
         } else {
           node.parentNode.previousElementSibling.value = res;
         }
        };
        qrcode.decode(reader.result);
      };
      reader.readAsDataURL(node.files[0]);
});

这是原始代码

  function openQRCamera(node) {
    var reader = new FileReader();
    reader.onload = function() {
      node.value = "";
     qrcode.callback = function(res) {
        if(res instanceof Error) {
          alert("There is no QR detected");
        } else {
          node.parentNode.previousElementSibling.value = res;
        }
      };
      qrcode.decode(reader.result);
    };
    reader.readAsDataURL(node.files[0]);
  }

我使用这个网站作为我的代码源，在我的本地主机上一切正常，但服务器很严格，我认为这对所有网站来说都是正常的。

https://www.sitepoint.com/create-qr-code-reader-mobile-website/

我只是被卡住并尝试使用 jquery 来执行其他解决方案，例如添加事件侦听器和 append 输入，但它不起作用。 提前致谢。

Answer 1

您正在使用的事件侦听器有问题，而不是听“onchange”，您必须像这样听“change”：

document.querySelector("#openQRCamera").addEventListener('change', () => {

//删除节点作为参数并使用javascript获取它：

var node = document.getElementById('openQRCamera'); ..