选择元素不会触发表单事件（只有 JavaScript，没有 jQuery！）

Question

I have a form with a select element, radio buttons and checkboxes giving different options that, when selected/unselected, change the text inside the div underneath the form, automatically, using an onchange or oninput event.

这一切都适用于单选按钮和复选框，但不适用于 select 元素，我从页面加载时选择的选项中获取结果，一旦我将其更改为另一个选项，而不是我选择的选项改变了，它只会在我第一次对选择元素应用更改时改变结果。

注意：我试图只使用 JavaScript 而不使用 JQuery。

var form = document.pcform;
var optionIndex = form.elements.dropdown.options.selectedIndex;

var thrPrice = 250;
var fftPrice = 300;
var svtPrice = 350;
var i3Price = 100;
var i5Price = 290;
var i7Price = 450;
var dvdPrice = 190;
var blurayPrice = 250;

function totalPrice() {
  var pcPrice = 0;

  if (optionIndex == 0) {
    pcPrice = pcPrice + thrPrice;
  }
  if (optionIndex == 1) {
    pcPrice = pcPrice + fftPrice;
  }
  if (optionIndex == 2) {
    pcPrice = pcPrice + svtPrice;
  }
  if (document.getElementById('i3').checked) {
    pcPrice = pcPrice + i3Price;
  }
  if (document.getElementById('i5').checked) {
    pcPrice = pcPrice + i5Price;
  }
  if (document.getElementById('i7').checked) {
    pcPrice = pcPrice + i7Price;
  }
  if (document.getElementById('dvd').checked) {
    pcPrice = pcPrice + dvdPrice;
  }
  if (document.getElementById('bluray').checked) {
    pcPrice = pcPrice + blurayPrice;
  }
  document.getElementById('priceDiv').innerHTML = "Your computer costs USD" + pcPrice;
}

pcform.addEventListener("change", totalPrice);

<form action="" name="pcform">
  <p>
    Get the computer exactly how you want it!
  </p>
  <label for=screens> Screen size: </label>
  <select id="dropdown" onchange="totalPrice()">
    <option id="thrteen" value="thirteen">13"</option>
    <option id="ffteen" value="fifteen">15"</option>
    <option id="svteen" value="seventeenthree">17,3"</option>
  </select>

  <p>Select the processor: <br />
    <label for="i3">
            <input type="radio" value="corei3" id="i3" name="processor">
            Core i3
          </label>
    <label for="i5">
            <input type="radio" value="corei5" id="i5" name="processor">
            Core i5
          </label>
    <label for="i7">
             <input type="radio" value="corei7" id="i7" name="processor">
            Core i7
          </label>
  </p>

  <p>Components: <br/>
    <label for="dvd"><input type="checkbox" value"dvdrom" id="dvd">
               DVD-ROM
             </label>
    <label for="bluray"><input type="checkbox" value="bluray" id="bluray">
               Blu bluray
             </label>
</form>.

<div id="priceDiv"></div>

Answer 1

onchange 事件每次都会触发。您没有在每次运行时都更新选项索引。

 var form = document.pcform;

    var thrPrice = 250;
    var fftPrice = 300;
    var svtPrice = 350;
    var i3Price = 100;
    var i5Price = 290;
    var i7Price = 450;
    var dvdPrice = 190;
    var blurayPrice = 250;

    function totalPrice() {
      var pcPrice = 0;
      var optionIndex = form.elements.dropdown.options.selectedIndex;

      if (optionIndex == 0) {
        pcPrice = pcPrice + thrPrice;
      }
      if (optionIndex == 1) {
        pcPrice = pcPrice + fftPrice;
      }
      if (optionIndex == 2) {
        pcPrice = pcPrice + svtPrice;
      }
      if (document.getElementById('i3').checked) {
        pcPrice = pcPrice + i3Price;
      }
      if (document.getElementById('i5').checked) {
        pcPrice = pcPrice + i5Price;
      }
      if (document.getElementById('i7').checked) {
        pcPrice = pcPrice + i7Price;
      }
      if (document.getElementById('dvd').checked) {
        pcPrice = pcPrice + dvdPrice;
      }
      if (document.getElementById('bluray').checked) {
        pcPrice = pcPrice + blurayPrice;
      }
      document.getElementById('priceDiv').innerHTML = "Your computer costs USD" + pcPrice;
    }

    pcform.addEventListener("change", totalPrice);

Answer 2

您的主要错误是每次更改时都没有获取索引。

我忍不住尝试在我的脑海中制作一个更优雅的版本，不引人注目。每当表单中的任何内容发生更改时，它都会更新

我修正了标签“for”和值“dvdrom”中的几个拼写错误和错误，没有 = 符号

下面的代码可以扩展到甚至不逐个查看字段，而是按类获取它们并在对象中查找它们

var prices = {
  "thirteen": 250,
  "fifteen": 300,
  "seventeenthree": 350,
  "corei3": 100,
  "corei5": 290,
  "corei7": 450,
  "dvdrom": 190,
  "bluray": 250
};

var pcForm = document.getElementById("pcform");
pcForm.addEventListener("change", function(e) {
  var screen = prices[document.getElementById("screens").value]; // always set

  var rad = document.querySelector("[name=processor]:checked"); // not always set
  var processor = rad ? prices[rad.value] : 0;

  var dvdCheck = document.getElementById("dvd");
  var dvd = dvdCheck.checked ? prices[dvdCheck.value] : 0; // checked or not

  var blurayCheck = document.getElementById("bluray");
  var bluray = blurayCheck.checked ? prices[blurayCheck.value] : 0; // checked or not

  // console.log(screen, processor, dvd, bluray)
  var pcPrice = screen + processor + dvd + bluray;
  document.getElementById('priceDiv').innerHTML = "Your computer costs USD" + pcPrice;
});
// trigger it onload
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', true, true);
pcForm.dispatchEvent(evt);

<form action="" name="pcform" id="pcform">
  Get the computer exactly how you want it!<br/>
  <label for="screens"> Screen size: </label>
  <select id="screens">
    <option id="thrteen" value="thirteen">13"</option>
    <option id="ffteen" value="fifteen">15"</option>
    <option id="svteen" value="seventeenthree">17,3"</option>
  </select>

  <p>Select the processor: <br />
    <label for="i3">
      <input type="radio" value="corei3" id="i3" name="processor">
      Core i3
    </label>
    <label for="i5">
      <input type="radio" value="corei5" id="i5" name="processor">
      Core i5 
    </label>
    <label for="i7">
      <input type="radio" value="corei7" id="i7" name="processor">
      Core i7
    </label>
  </p>

  <p>Components: <br/>
    <label for="dvd"><input type="checkbox" value="dvdrom" id="dvd">
      DVD-ROM
    </label>
    <label for="bluray"><input type="checkbox" value="bluray" id="bluray">
      Blu bluray
    </label>
</form>
<div id="priceDiv"></div>

Answer 3

我做了console.log(optionIndex)，发现每次都会触发。问题出在逻辑上，您将optionIndex 用于Select 项目索引，但您从未更新过它。您可以简单地使用event 来获取所选选项的值并检查它们。

请在下面找到更新的代码：

var thrPrice = 250;
var fftPrice = 300;
var svtPrice = 350;
var i3Price = 100;
var i5Price = 290;
var i7Price = 450;
var dvdPrice = 190;
var blurayPrice = 250;

function totalPrice(event) {
  var pcPrice = 0;
  if (event.target.value === 'thirteen') {
    pcPrice = pcPrice + thrPrice;
  }
  if (event.target.value === 'fifteen') {
    pcPrice = pcPrice + fftPrice;
  }
  if (event.target.value === 'seventeenthree') {
    pcPrice = pcPrice + svtPrice;
  }
  if (document.getElementById('i3').checked) {
    pcPrice = pcPrice + i3Price;
  }
  if (document.getElementById('i5').checked) {
    pcPrice = pcPrice + i5Price;
  }
  if (document.getElementById('i7').checked) {
    pcPrice = pcPrice + i7Price;
  }
  if (document.getElementById('dvd').checked) {
    pcPrice = pcPrice + dvdPrice;
  }
  if (document.getElementById('bluray').checked) {
    pcPrice = pcPrice + blurayPrice;
  }
  document.getElementById('priceDiv').innerHTML = "Your computer costs USD" + pcPrice;
}

pcform.addEventListener("change", totalPrice);

<form action="" name="pcform" id="pcform">
  Get the computer exactly how you want it!<br/>
  <label for="screens"> Screen size: </label>
  <select id="screens">
    <option id="thrteen" value="thirteen">13"</option>
    <option id="ffteen" value="fifteen">15"</option>
    <option id="svteen" value="seventeenthree">17,3"</option>
  </select>

  <p>Select the processor: <br />
    <label for="i3">
      <input type="radio" value="corei3" id="i3" name="processor">
      Core i3
    </label>
    <label for="i5">
      <input type="radio" value="corei5" id="i5" name="processor">
      Core i5 
    </label>
    <label for="i7">
      <input type="radio" value="corei7" id="i7" name="processor">
      Core i7
    </label>
  </p>

  <p>Components: <br/>
    <label for="dvd"><input type="checkbox" value="dvdrom" id="dvd">
      DVD-ROM
    </label>
    <label for="bluray"><input type="checkbox" value="bluray" id="bluray">
      Blu bluray
    </label>
</form>
<div id="priceDiv"></div>