【问题标题】:Javascript fails on old Windows Firefox [duplicate]旧 Windows Firefox 上的 Javascript 失败 [重复]
【发布时间】:2020-03-23 14:29:04
【问题描述】:

我已经构建了一个订单查询表单,其中包含一些 Javascript 驱动的功能。我可以在所有可以测试的浏览器上使用此表单,包括 Win 10 和一些 Mac 操作系统。我的客户仍在使用 Windows XP,他说这两个功能不起作用:

  1. 使用单选按钮选项提高商品价格

  2. 收集完所有内容后计算页面底部的小计 各种商品的价格和数量。

在我告诉他我不支持 XP 之前,我想知道我的脚本中是否存在已知在 Windows XP 上的 Firefox 中会失败的内容(希望有解决方法)。我在网上查了方法文档,没有看到。这是我正在使用的各种脚本。这些都是纯Javascript,只是看看我能不能做到。

每次商品数量变化时都会触发小计重新计算。

/************************************************
 *              Wide Option
 ************************************************/

function subtractWideOption() { // below traverse DOM from radio button to price
  var priceSpan = event.target.parentNode.parentNode.nextElementSibling.firstElementChild;
  if (priceSpan.className.indexOf("wider") !== -1) { // test if option is already set
    var currentPrice = parseInt(priceSpan.innerHTML.slice(1), 10); // remove $ sign and parse
    var newPrice = currentPrice - 25; // remove cost for option
    priceSpan.innerHTML = "$" + newPrice; // add $ sign
    priceSpan.className = priceSpan.className.replace(" wider",""); // remove option class
    priceSpan.className += " std"; // add standard class
  } else {
    return;
  }
}

function addWideOption() {
  var priceSpan = event.target.parentNode.parentNode.nextElementSibling.firstElementChild;
  if (priceSpan.className.indexOf("std") !== -1) {
    var currentPrice = parseInt(priceSpan.innerHTML.slice(1), 10);
    var newPrice = currentPrice + 25;
    priceSpan.innerHTML = "$" + newPrice;
    priceSpan.className = priceSpan.className.replace(" std","");
    priceSpan.className += " wider";
  } else {
    return;
  }
}



/************************************************
 *              Order Subtotal
 ************************************************/

var qtyBtns = document.getElementsByClassName("qty"); // collect all qty inputs
var subTotal = document.getElementById("oi_subt");

function recalcSubtotal() {
  var subT = 0;
  for (var i = 0; i < qtyBtns.length; i++) { // below traverse DOM from input to price
    var priceHTML = qtyBtns[i].parentNode.previousElementSibling.firstElementChild.innerHTML;
    if (priceHTML == "TBD") { // one custom item with TBD price is ignored
      price = "0"
    } else {
      priceHTML = priceHTML.replace(",",""); // remove comma from price
      var price = parseInt(priceHTML.slice(1), 10); // remove $ sign and parse
    };
    var qty = parseInt(qtyBtns[i].value, 10);
    subT += (price * qty); // add up all items ordered
    subTotal.innerHTML = "$" + subT;
  }
}

【问题讨论】:

  • 那里的脚本到底是什么失败了?错误是什么?
  • 很遗憾,我对客户视图的访问权限有限。我不想过多地打扰他。他只是说他们不工作。我假设他没有收到错误消息。如果您有 XP 和 Firefox,这是我正在处理的表单的链接...greatgraphicdesign.com/work/bsp/order-inquiry.html
  • 您检查过您在 caniuse 上的方法吗?喜欢:caniuse.com/#search=slice
  • 许多不同版本的 Firefox 在 Windows XP(一个五年多来一直没有安全或任何其他更新的操作系统)上运行。准确找出所涉及的 Firefox 版本将是一个非常好的主意。

标签: javascript browser operating-system compatibility backwards-compatibility


【解决方案1】:

您正在像这样绑定您的事件处理程序:

var stepupBtns = document.getElementsByClassName("steppingUp");

for (var i = 0; i < stepupBtns.length; i++) {
  stepupBtns[i].onclick = function(){
    var valueOf = this.previousElementSibling.value;
    valueOf = ++valueOf;
    this.previousElementSibling.value = valueOf;
    event.preventDefault();
    recalcSubtotal();
  }
}

在这些函数中,请注意event 变量未在任何地方定义。事件变量应该在你的函数定义中传递:

  stepupBtns[i].onclick = function(event){

您应该在所有处理程序上执行此操作。

更多信息可以在这里找到:https://stackoverflow.com/a/20522980

【讨论】:

  • 如果您发现了错误,并且之前已经回答过,最好将其标记为链接问题的副本而关闭
  • 谢谢!这是有用的反馈。在这种特殊情况下,增量/减量脚本在 XP 中工作,所以它们不会让我头疼。我已将它们从我原来的问题中删除,这样我们就可以消除一些混乱。剩下的是两个失败的脚本(仅在旧 Firefox 中)。
  • @chillywilly 我使用 Browserstack 在 XP 上启动了 Firefox,并且可以确认这是您的问题。我可能链接了错误的功能。 event 未在任何地方定义,FF 抛出错误。找到所有onclick 处理程序并确保它们在函数定义中传递参数event。您可以查看划线的帖子以获取更多信息。
  • 请阅读您的更新回复。太感谢了!我充满希望。那么我应该添加这样的事件吗? function addWideOption(event) { --- 或者我应该像这样在 HTML 中放置事件? onclick="subtractWideOption(event)" -- 或两者兼而有之?
  • 前者,我的回答中有一个例子。网站 Browserstack 是一个很好的帮助测试跨平台的网站,这是我使用的。
猜你喜欢
  • 2018-10-29
  • 1970-01-01
  • 1970-01-01
  • 2021-01-09
  • 2021-05-28
  • 1970-01-01
  • 1970-01-01
  • 2010-11-24
  • 2017-09-27
相关资源
最近更新 更多