Скрипт не работает в Inte rnet Explorer - PullRequest
Новая
       34

Скрипт не работает в Inte rnet Explorer

0 голосов
/ 10 января 2020

Мой скрипт отлично работает на всем, кроме inte rnet explorer. Я не уверен, так ли это, потому что я использую неподдерживаемый синтаксис или функции или что-то еще, но если кто-то может взглянуть и посмотреть, если что-то выделяется для них, это будет действительно оценено.

Базовая c реализация сценария заключается в создании простого списка корзины покупок, когда пользователи нажимают на кнопку. Суммарные приращения включают добавленный товар, а также его имя, количество и цену.

У меня есть другие скрипты, которые работают на моей странице, поэтому я знаю, что возможно реализовать onclick, например, но я не уверен, как действовать дальше.

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

Будем благодарны за любые мысли.

1 Ответ

0 голосов
/ 10 января 2020

Многие функции в 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 = шаблон% 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;
}
image
...