脚本未在 Internet Explorer 上运行

Question

My script is working fine on everything except internet explorer. I'm not sure if it because I am using unsupported syntax or functions or what but if someone could take a look and see if anything stands out to them it would be really appreciated.

The basic implementation of the script is to create a simple shopping cart list when users click on a button. The total increments to include the added item and the item name, quantity and price is listed.

I have other scripts that work on my page so I know it is possible to implement onclick for example but I am unsure how to proceed here.

    <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);
  }

Any thoughts would be appreciated.

Answer 1

A lot of features in ES6 will not work in IE.

Template literals for example: ${qty} ${values[clicked_id].name}

In this case you need to rewrite your template literals into normal strings using quotes:

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

This website:
https://caniuse.com/#search=template%20literals

and MDN are valuable resources when I comes to compatibility.

---

Rewrite:
Tested on IE and it works!

 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>