脚本未在 Internet Explorer 上运行

Question

我的脚本在除 Internet Explorer 之外的所有设备上都运行良好。我不确定是不是因为我使用了不受支持的语法或函数或什么，但如果有人可以看一下，看看是否有什么对他们来说很突出，那将不胜感激。

该脚本的基本实现是在用户单击按钮时创建一个简单的购物车列表。列出了包含添加项目和项目名称、数量和价格的总增量。

我的页面上有其他脚本可以运行，所以我知道例如可以实现 onclick，但我不确定如何在此处继续。

    <div class="product-div" id="big-blue-barrel-div">
            <h3>Big Blue barrel- $199</h3>
            <div class="img-div">
              <img src="images/barrel-pic.png" alt="picture of barrel" class="product-img">
            </div>
            <span>Quantity: </span>
            <input class="qty bigBlueBarrelQty" type="number" name="qty" value="1" min="1" id="bigBlueBarrelQty">
            <button type="button" onclick="addData(this.id, 'bigBlueBarrelQty')" name="button" id="bigBlueBarrel">Add to Cart</button>
          </div>

    var values = {
    bigBlueBarrel: {
      name: "Big Blue Barrel",
      price: 199
    },
    bigBlueBox: {
      name: "Big Blue Box",
      price: 399
    },
    babyBlueBarrel: {
      name: "Baby Blue Barrel",
      price: 99
    }
  }


  var total = 0;
  var rowCount = 1;

  function addData(clicked_id, quantity) {
    var price = values[clicked_id].price;
    var qty = document.getElementById(quantity).value;
    var lineTotal = price * qty;

    total += lineTotal;
    document.getElementById("total").innerHTML = total;

    addRow(clicked_id, qty, lineTotal);

    if (qty == 1) {
      alert(`${qty} ${values[clicked_id].name} has been added to your cart!

      Scroll down to view your cart.`)
    } else if (qty > 1) {
      alert(`${qty} ${values[clicked_id].name}s have been added to your cart!

      Scroll down to view your cart`);
    }
  }

  function addRow(clicked_id, qty, lineTotal) {
    var rows = "";
    if (rowCount % 2 != 0 ) {
      rows += `<tr class="odd"><td>${values[clicked_id].name}</td><td class="row-qty">${qty}</td><td>$${lineTotal}</td><td class="delete"><button onclick="deleteRow(this)" class="delete-btn">delete</button></td></tr>`;
      $(rows).appendTo("#cart tbody");
      rowCount++;
    } else {
      rows += `<tr class="even"><td>${values[clicked_id].name}</td><td class="row-qty">${qty}</td><td>$${lineTotal}</td><td class="delete"><button onclick="deleteRow(this)" class="delete-btn">delete</button></td></tr>`;
      $(rows).appendTo("#cart tbody");
      rowCount++;
    }
  }

  function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("cart").deleteRow(i);
  }

任何想法都将不胜感激。

Answer 1

ES6 中的很多功能在 IE 中无法使用。

Template literals 例如： ${qty} ${values[clicked_id].name}

在这种情况下，您需要使用引号将 template literals 重写为普通字符串：

     alert(qty + " " + values[clicked_id].name + " has been added to your cart!"+
      "\n\n" +
      "Scroll down to view your cart.");    

本网站：
https://caniuse.com/#search=template%20literals

就兼容性而言，MDN 是宝贵的资源。

---

重写：
在 IE 上测试，它可以工作！

var values = {
  bigBlueBarrel: {
    name: "Big Blue Barrel",
    price: 199
  },
  bigBlueBox: {
    name: "Big Blue Box",
    price: 399
  },
  babyBlueBarrel: {
    name: "Baby Blue Barrel",
    price: 99
  }
}
var total = 0;
var rowCount = 1;

function addData(clicked_id, quantity) {
  var price = values[clicked_id].price;
  var qty = document.getElementById(quantity).value;
  var lineTotal = price * qty;

  total += lineTotal;
  document.getElementById("total").innerHTML = total;

  addRow(clicked_id, qty, lineTotal);

  if (qty == 1) {
    /*alert(`${qty} ${values[clicked_id].name} has been added to your cart!
    
      Scroll down to view your cart.`)*/
    alert(qty + " " + values[clicked_id].name + " has been added to your cart!" +
      "\n\n" +
      "Scroll down to view your cart.");
  } else if (qty > 1) {
    /*alert(`${qty} ${values[clicked_id].name}s have been added to your cart!

      Scroll down to view your cart`);*/
    alert(qty + " " + values[clicked_id].name + "s has been added to your cart!" +
      "\n\n" +
      "Scroll down to view your cart.");
  }
}

function addRow(clicked_id, qty, lineTotal) {
  var rows = "";
  //optimizing this:
  /*rows += `<tr class="odd"><td>${values[clicked_id].name}</td><td class="row-qty">${qty}</td><td>$${lineTotal}</td><td class="delete"><button onclick="deleteRow(this)" class="delete-btn">delete</button></td></tr>`;*/

  rows += '<tr class="' + (rowCount % 2 ? 'even' : 'odd') + '"><td>' + values[clicked_id].name + '</td><td class="row-qty">' + qty + '</td><td>' + lineTotal + '</td><td class="delete"><button onclick="deleteRow(this)" class="delete-btn">delete</button></td></tr>';
  $(rows).appendTo("#cart tbody");
  rowCount++;
}

function deleteRow(r) {
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("cart").deleteRow(i);
}

table#cart {
  margin: 40px;
  border: 1px solid #e3e3e3;
  border-collapse: collapse;
}

table#cart td {
  padding: 10px;
  border-right: 1px dashed #f2f2f2;
}

table#cart td > button{
  padding: 10px;
  border: 1px solid #f2f2f2;
  background-color: #ff4444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-div" id="big-blue-barrel-div">
  <h3>Big Blue barrel- $199</h3>
  <div class="img-div">
    <img src="images/barrel-pic.png" alt="picture of barrel" class="product-img">
  </div>
  <span>Quantity: </span>
  <input class="qty bigBlueBarrelQty" type="number" name="qty" value="1" min="1" id="bigBlueBarrelQty">
  <button type="button" onclick="addData(this.id, 'bigBlueBarrelQty')" name="button" id="bigBlueBarrel">Add to Cart</button>
</div>

<!-- added for testing -->

<table id="cart">
  <tbody>
  </tbody>
</table>
Total: <span id="total"></span>