我建立了一个订单查询表单,该表单具有一些JavaScript驱动的功能。我已经在可以测试的每种浏览器上使用了此表格,这些浏览器是Win 10和一些Mac操作系统。我的客户仍在使用Windows XP,他说这两个功能不起作用:
使用单选按钮选项提高商品价格
收集所有以下内容后,计算页面底部的小计各种商品的价格和数量。
[在我告诉他我不支持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;
}
}
您正在像这样绑定事件处理程序:
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