无法在IE11或IE9中运行以下js代码

Question

我用一些 js 代码制作了一个简单的 html 页面，我使用了所有 vanilla JS 并检查是否使用了与 IE 兼容的所有功能。

问题是在 Google Chrome 中的下一页运行s 因为它必须，而在 IE 中它不起作用，我已经在 IE11 和 IE9 中尝试过两者都不起作用。

代码只是将点击事件添加到三个按钮，按钮 + / - 改变输入和确认按钮中的数量。

js 看起来像这样：

<script>
    const btns = document.querySelectorAll('.btn-qty');
    const confirms = document.querySelectorAll('.btn-success');
    const inputs = document.querySelectorAll('.qty')
    
    confirms.forEach(function(confirm) {
     confirm.addEventListener('click', confirmHandler);
    });
    
    function confirmHandler(event) {
      event.preventDefault();
        let product_id = this.getAttribute("data-product-id");
        let option_id = this.getAttribute("data-option-id");
        let iva = parseInt(this.getAttribute("data-iva"));
        let price = this.getAttribute("data-price");
        let qty = this.getAttribute("data-qty");
        window.location.href = "_?productId=" + product_id + "&optionId=" + option_id + "&iva=" + iva + "&price=" + price + "&qty=" + qty
    }
    
    inputs.forEach(function(input) {
      input.addEventListener('change', function(event) {
          event.preventDefault();
            let btn = input.parentNode.querySelector(".input-group-prepend").querySelector('.btn-qty');
            let confirm = input.parentNode.parentNode.querySelector('.btn-success')
          let curVal = parseInt(input.value)
            confirm.setAttribute('data-qty', curVal)
            if (curVal >= 1) {
             btn.removeAttribute('disabled');
            }else if(curVal <= 1){
             btn.setAttribute('disabled', true);
            }
        }); 
    });
    
    btns.forEach(function(btn) {
     btn.addEventListener('click', function(event) {
      event.preventDefault();
      let input = btn.parentNode.parentNode.querySelector('.qty')
        let curVal = parseInt(input.value)
        let type = btn.getAttribute("data-type");
        
        if (type == 'minus') {
            if (curVal > 1) {
                input.value = curVal - 1
                input.dispatchEvent(new Event('change'));
            }
            if (parseInt(input.value) == 1) {
                btn.setAttribute('disabled', true)
            }
        }else if (type == 'plus'){
                input.value = curVal + 1
                input.dispatchEvent(new Event('change'));
        }
        
     });
    });
</script>

这是 Chrome（顶部）和 IE11（底部）运行上的相同代码

这里是JSfiddle的代码

Answer 1

我同意伊瓦尔的建议。我们需要在 IE 中为 forEach 添加 polyfill，然后它才能与 IE 中的 NodeList 和 HTMLCollection 一起使用。请添加以下 polyfill:

var ctors = [typeof NodeList !== "undefined" && NodeList, typeof HTMLCollection !== "undefined" && HTMLCollection];
for (var n = 0; n < ctors.length; ++n) {
    var ctor = ctors[n];
    if (ctor && ctor.prototype && !ctor.prototype.forEach) {
        ctor.prototype.forEach = Array.prototype.forEach;
        if (typeof Symbol !== "undefined" && Symbol.iterator && !ctor.prototype[Symbol.iterator]) {
            Object.defineProperty(ctor.prototype, Symbol.iterator, {
                value: Array.prototype[Symbol.itereator],
                writable: true,
                configurable: true
            });
        }
    }
}

此外，IE中这一行还有一个错误：

input.dispatchEvent(new Event('change'));

您需要使用以下代码才能在 IE 中使用 dispatchEvent:

var event = document.createEvent("Event");
event.initEvent("change", false, true); 
input.dispatchEvent(event);

无法在IE11或IE9中运行以下js代码

Unable to run the following js code in IE11 or IE9

javascript

internet-explorer

cross-browser