JavaScript 表单脚本有效 Chrome 但其他地方无效

Question

2015 年 9 月 6 日第二次更新

这就是我想出的解决方案 — 它肯定更短，并且适用于我所有的 Mac 浏览器，所以我假设它也适用于其他地方。有没有办法进一步压缩它，还是我应该把它留在这里？

var myForm = document.form1;
var radioNames = [myForm.proSpeed, myForm.ram, myForm.storage, myForm.graphics, myForm.cursorControl];
var lastPrice = [0, 0, 0, 0, 0];
var total = 2299;
var result = document.getElementById('result');
result.innerHTML = "$" + total + ".00";

function getLastPrice(radios, lastPriceIndex) {    
    for (var index = 0; index < radios.length; index++) {
        if (radios[index].checked) {
            var price = parseInt(radios[index].value);
            total = total + lastPrice[lastPriceIndex] + price;
            result.innerHTML = "$" + total + ".00";
            lastPrice[lastPriceIndex] = -price;
        }
    }    
}

function getProPrice() {
    getLastPrice(myForm.proSpeed, 0);
}
function getRamPrice() {
    getLastPrice(myForm.ram, 1);
}
function getStoPrice() {
    getLastPrice(myForm.storage, 2);
}
function getGraPrice() {
    getLastPrice(myForm.graphics, 3);
}
function getCurPrice() {
    getLastPrice(myForm.cursorControl, 4);
}

var priceFunctions = [getProPrice, getRamPrice, getStoPrice, getGraPrice, getCurPrice];

function addRadioListeners(radios, priceFunction) {
    for (var index = 0; index < radios.length; index++) {
        radios[index].addEventListener("change", priceFunction);
    }
}

for (var index = 0; index < 5; index++) {
    addRadioListeners(radioNames[index], priceFunctions[index]);
}

2015 年 9 月 5 日更新

@Barmar 再次感谢您的帮助。我现在正在组合 addPrice 函数：

function addPrice(price, radios) {
    for (var index = 0; index < radios.length; index++) {
        if (radios[index].checked) {
            total = total - price + parseInt(radios[index].value);
            price = parseInt(radios[index].value);
            result.innerHTML = "$" + total + ".00";
            break;
        }
    }
}

proPrice = addPrice(proPrice, myForm.proSpeed);

只是不确定下一步该怎么做才能删除其他功能并保持表单正常工作。换句话说，proPrice 去哪里了，现在 addProPrice 不存在了，我在 change eventListener 中放了什么？ proPrice 返回为未定义。

原版Post

我正在进行 JavaScript 练习，该练习让我创建了一个构建您自己的计算机商店页面，因此我决定尝试模仿 Apple Store 中的页面。这是我要复制的页面：

Retina 5k iMac

这是我的（非常）简单的版本：mock-up of iMac store page

我的版本适用于 Chrome，但不适用于 Firefox 或 Safari。我不知道问题出在哪里。有什么想法吗？

（如果您不想遵循 link，下面是完整代码）

HTML:

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Apple Store Sim</title>
</head>

<body>

<form action="" name="form1" id="form1">
    <h1>iMac with Retina 5K display</h1>
    <p>1. Choose Processor</p>
    <p>
        <input type="radio" name="proSpeed" checked="checked" value="0" />
        <label>3.5GHz Quad-core Intel Core i5, Turbo Boost up to 3.9GHz</label><br />
        <input type="radio" name="proSpeed" value="250" />
        <label>4.0GHz Quad-core Intel Core i7, Turbo Boost up to 4.4GHz</label>
    </p>
    <p>2. Choose Memory</p>
    <p>
        <input type="radio" name="ram" checked="checked" value="0" />
        <label>8GB 1600MHz DDR3 SDRAM - 2x4GB</label><br />
        <input type="radio" name="ram" value="200" />
        <label>16GB 1600MHz DDR3 SDRAM - 2x8GB</label><br />
        <input type="radio" name="ram" value="600" />
        <label>32GB 1600MHz DDR3 SDRAM - 4x8GB</label>
    </p>
    <p>3. Choose Storage</p>
    <p>
        <input type="radio" name="storage" checked="checked" value="0" />
        <label>1TB Fusion Drive</label><br />
        <input type="radio" name="storage" value="150" />
        <label>3TB Fusion Drive</label><br />
        <input type="radio" name="storage" value="0" />
        <label>256GB Flash Storage</label><br />
        <input type="radio" name="storage" value="300" />
        <label>512GB Flash Storage</label><br />
        <input type="radio" name="storage" value="800" />
        <label>1TB Flash Storage</label>
    </p>
    <p>4. Choose Graphics</p>
    <p>
        <input type="radio" name="graphics" checked="checked" value="0" />
        <label>AMD Radeon R9 M290X 2GB GDDR5</label><br />
        <input type="radio" name="graphics" value="250" />
        <label>AMD Radeon R9 M295X 4GB GDDR5</label>
    </p>
    <p>5. Choose Mouse and Magic Trackpad</p>
    <p>
        <input type="radio" name="cursorControl" checked="checked" value="0" />
        <label>Apple Magic Mouse</label><br />
        <input type="radio" name="cursorControl" value="0" />
        <label>Magic Trackpad</label><br />
        <input type="radio" name="cursorControl" value="0" />
        <label>Apple Mouse</label><br />
        <input type="radio" name="cursorControl" value="69" />
        <label>Apple Magic Mouse + Magic Trackpad</label><br />
    </p>
    <p>6. Choose Apple Keyboard and Documentation</p>
    <p>
        <select name="keyboard" size="1">
            <option value="0" selected="selected">Apple Wireless Keyboard (English) &amp; User's Guide</option>
            <option value="0">Apple Wireless Keyboard (Arabic) &amp; User's Guide</option>
            <option value="0">Apple Wireless Keyboard (British) &amp; User's Guide</option>
        </select>
    </p>
</form>
<div id="result"></div>
<script src="appleStoreSim.js"></script>
</body>
</html>

Javascript:

var myForm = document.form1;
var proPrice = 0;
var ramPrice = 0;
var stoPrice = 0;
var graPrice = 0;
var curPrice = 0;
var total = 2299;
var result = document.getElementById('result');
result.innerHTML = "$" + total + ".00";

function addProPrice(radio) {
    var radios = myForm.proSpeed;
    
    for (var index = 0; index < radios.length; index++) { 
        if (radios[index].checked) {
            total = total - proPrice + parseInt(radios[index].value);
            result.innerHTML = "$" + total + ".00";
            addProListener();
        }
    }    
}

function addProListener(radio) {
    var radios = myForm.proSpeed;

    for (var index = 0; index < radios.length; index++) {
        if (radios[index].checked) {
            radios[index].removeEventListener("click", addProPrice);
            proPrice = radios[index].value;
        } else {
            radios[index].addEventListener("click", addProPrice)
        }
    }
}

for (var index = 0; index < myForm.proSpeed.length; index++) { 
    myForm.proSpeed[index].addEventListener("focus", addProListener);
}

function addMemPrice(radio) {
    var radios = myForm.ram;
    
    for (var index = 0; index < radios.length; index++) { 
        if (radios[index].checked) {
            total = total - ramPrice + parseInt(radios[index].value);
            result.innerHTML = "$" + total + ".00";
            addMemListener();
        }
    }
}

function addMemListener(radio) {
    var radios = myForm.ram;
    
    for (var index = 0; index < radios.length; index++) {
        if (radios[index].checked) {
            radios[index].removeEventListener("click", addMemPrice);
            ramPrice = radios[index].value;
        } else {
            radios[index].addEventListener("click", addMemPrice)
        }
    }
}

for (var index = 0; index < myForm.ram.length; index++) { 
    myForm.ram[index].addEventListener("focus", addMemListener);
}

function addStoPrice(radio) {
    var radios = myForm.storage;
    
    for (var index = 0; index < radios.length; index++) { 
        if (radios[index].checked) {
            total = total - stoPrice + parseInt(radios[index].value);
            result.innerHTML = "$" + total + ".00";
            addStoListener();
        }
    }
}

function addStoListener(radio) {
    var radios = myForm.storage;
    
    for (var index = 0; index < radios.length; index++) {
        if (radios[index].checked) {
            radios[index].removeEventListener("click", addStoPrice);
            stoPrice = radios[index].value;
        } else {
            radios[index].addEventListener("click", addStoPrice)
        }
    }
}

for (var index = 0; index < myForm.storage.length; index++) { 
    myForm.storage[index].addEventListener("focus", addStoListener);
}

function addGraPrice(radio) {
    var radios = myForm.graphics;
    
    for (var index = 0; index < radios.length; index++) { 
        if (radios[index].checked) {
            total = total - graPrice + parseInt(radios[index].value);
            result.innerHTML = "$" + total + ".00";
            addGraListener();
        }
    }
}

function addGraListener(radio) {
    var radios = myForm.graphics;
    
    for (var index = 0; index < radios.length; index++) {
        if (radios[index].checked) {
            radios[index].removeEventListener("click", addGraPrice);
            graPrice = radios[index].value;
        } else {
            radios[index].addEventListener("click", addGraPrice)
        }
    }
}

for (var index = 0; index < myForm.graphics.length; index++) { 
    myForm.graphics[index].addEventListener("focus", addGraListener);
}

function addCurPrice(radio) {
    var radios = myForm.cursorControl;
    
    for (var index = 0; index < radios.length; index++) { 
        if (radios[index].checked) {
            total = total - curPrice + parseInt(radios[index].value);
            result.innerHTML = "$" + total + ".00";
            addCurListener();
        }
    }
}

function addCurListener(radio) {
    var radios = myForm.cursorControl;
    
    for (var index = 0; index < radios.length; index++) {
        if (radios[index].checked) {
            radios[index].removeEventListener("click", addCurPrice);
            curPrice = radios[index].value;
        } else {
            radios[index].addEventListener("click", addCurPrice)
        }
    }
}

for (var index = 0; index < myForm.cursorControl.length; index++) { 
    myForm.cursorControl[index].addEventListener("focus", addCurListener);
}

Answer 1

当您单击单选按钮时，Mac 上的 Firefox 不会触发 focus 事件。我没有研究这是否违反标准，但有一种更简单的方法来做你正在做的事情。不要使用 focus 事件来添加 click 处理程序，只需使用 change 事件即可。只要您单击尚未选中的单选按钮，就会触发此事件。这可以直接绑定到 addXXXPrice 函数。

顺便说一句，您所有的 addXXXPrice 函数都声明了一个从未使用过的 radio 参数。事件处理程序的实际参数是一个 event 对象，而不是单选按钮；事件的目标将在 this.

所有这些 addXXXPrice 函数都是相同的，除了它们循环的一组按钮和它们更新的 xxxPrice 变量。我建议您将其提取到一个将这些东西作为参数的函数中，这样您就可以：

proPrice = addPrice(proPrice, myForm.proSpeed);

这是您的代码的修订版本：

var myForm = document.form1;
var proPrice = 0;
var ramPrice = 0;
var stoPrice = 0;
var graPrice = 0;
var curPrice = 0;
var total = 2299;
var result = document.getElementById('result');
result.innerHTML = "$" + total + ".00";
//total = parseFloat(total).toFixed(2);

console.log(result);

function addProPrice(radio) {
  var radios = myForm.proSpeed;

  for (var index = 0; index < radios.length; index++) {
    if (radios[index].checked) {
      total = total - proPrice + parseInt(radios[index].value);
      proPrice = parseInt(radios[index].value);
      result.innerHTML = "$" + total + ".00";
      break;
    }
  }
}

for (var index = 0; index < myForm.proSpeed.length; index++) {
  myForm.proSpeed[index].addEventListener("change", addProPrice);
}

function addMemPrice(radio) {
  var radios = myForm.ram;

  for (var index = 0; index < radios.length; index++) {
    if (radios[index].checked) {
      total = total - ramPrice + parseInt(radios[index].value);
      ramPrice = parseInt(radios[index].value);
      result.innerHTML = "$" + total + ".00";
      break;
    }
  }
}

for (var index = 0; index < myForm.ram.length; index++) {
  myForm.ram[index].addEventListener("change", addMemPrice);
}

function addStoPrice(radio) {
  var radios = myForm.storage;

  for (var index = 0; index < radios.length; index++) {
    if (radios[index].checked) {
      total = total - stoPrice + parseInt(radios[index].value);
      stoPrice = parseInt(radios[index].value);
      result.innerHTML = "$" + total + ".00";
      break;
    }
  }
}

for (var index = 0; index < myForm.storage.length; index++) {
  myForm.storage[index].addEventListener("change", addStoPrice);
}

function addGraPrice(radio) {
  var radios = myForm.graphics;

  for (var index = 0; index < radios.length; index++) {
    if (radios[index].checked) {
      total = total - graPrice + parseInt(radios[index].value);
      graPrice = parseInt(radios[index].value);
      result.innerHTML = "$" + total + ".00";
      break;
    }
  }
}

for (var index = 0; index < myForm.graphics.length; index++) {
  myForm.graphics[index].addEventListener("change", addGraPrice);
}

function addCurPrice(radio) {
  var radios = myForm.cursorControl;

  for (var index = 0; index < radios.length; index++) {
    if (radios[index].checked) {
      total = total - curPrice + parseInt(radios[index].value);
      curPrice = parseInt(radios[index].value);
      result.innerHTML = "$" + total + ".00";
      break;
    }
  }
}

for (var index = 0; index < myForm.cursorControl.length; index++) {
  myForm.cursorControl[index].addEventListener("change", addCurPrice);
}

<form action="" name="form1" id="form1">
  <h1>iMac with Retina 5K display</h1>
  <p>1. Choose Processor</p>
  <p>
    <input type="radio" name="proSpeed" checked="checked" value="0" />
    <label>3.5GHz Quad-core Intel Core i5, Turbo Boost up to 3.9GHz</label>
    <br />
    <input type="radio" name="proSpeed" value="250" />
    <label>4.0GHz Quad-core Intel Core i7, Turbo Boost up to 4.4GHz</label>
  </p>
  <p>2. Choose Memory</p>
  <p>
    <input type="radio" name="ram" checked="checked" value="0" />
    <label>8GB 1600MHz DDR3 SDRAM - 2x4GB</label>
    <br />
    <input type="radio" name="ram" value="200" />
    <label>16GB 1600MHz DDR3 SDRAM - 2x8GB</label>
    <br />
    <input type="radio" name="ram" value="600" />
    <label>32GB 1600MHz DDR3 SDRAM - 4x8GB</label>
  </p>
  <p>3. Choose Storage</p>
  <p>
    <input type="radio" name="storage" checked="checked" value="0" />
    <label>1TB Fusion Drive</label>
    <br />
    <input type="radio" name="storage" value="150" />
    <label>3TB Fusion Drive</label>
    <br />
    <input type="radio" name="storage" value="0" />
    <label>256GB Flash Storage</label>
    <br />
    <input type="radio" name="storage" value="300" />
    <label>512GB Flash Storage</label>
    <br />
    <input type="radio" name="storage" value="800" />
    <label>1TB Flash Storage</label>
  </p>
  <p>4. Choose Graphics</p>
  <p>
    <input type="radio" name="graphics" checked="checked" value="0" />
    <label>AMD Radeon R9 M290X 2GB GDDR5</label>
    <br />
    <input type="radio" name="graphics" value="250" />
    <label>AMD Radeon R9 M295X 4GB GDDR5</label>
  </p>
  <p>5. Choose Mouse and Magic Trackpad</p>
  <p>
    <input type="radio" name="cursorControl" checked="checked" value="0" />
    <label>Apple Magic Mouse</label>
    <br />
    <input type="radio" name="cursorControl" value="0" />
    <label>Magic Trackpad</label>
    <br />
    <input type="radio" name="cursorControl" value="0" />
    <label>Apple Mouse</label>
    <br />
    <input type="radio" name="cursorControl" value="69" />
    <label>Apple Magic Mouse + Magic Trackpad</label>
    <br />
  </p>
  <p>6. Choose Apple Keyboard and Documentation</p>
  <p>
    <select name="keyboard" size="1">
      <option value="0" selected="selected">Apple Wireless Keyboard (English) &amp; User's Guide</option>
      <option value="0">Apple Wireless Keyboard (Arabic) &amp; User's Guide</option>
      <option value="0">Apple Wireless Keyboard (British) &amp; User's Guide</option>
    </select>
  </p>
</form>
<div id="result"></div>

JavaScript 表单脚本有效 Chrome 但其他地方无效

JavaScript form script works Chrome but nowhere else

html

javascript

forms

dom-events