在 HTML 形式的 onchange 事件中使用数据值

Question

我正在创建一种计算器，一个人可以在其中 select 两个值并计算相应的收入。一个人将 select 来自字段 "Wage by Employer" 和 "Effort by Worker" 的下拉值列表。需要计算的字段有"Employer Earning"和"Worker Earning"。

"Employer Earning" 直接计算它由公式给出 $(120-Wage)*Effort$ 。然而，Worker Earnings 稍微复杂一点，因为对于每个 "Effort" 的值，都会有相应的 "Effort Cost"，用户永远不会 select "Effort Cost" 但 Effort 和 Effort Cost 之间的关系是预先确定的. "Worker Earning" 由公式 $Wage - 20 - Effort Cost$ 给出。现在我已经编写了以下代码来创建这个收入计算器；

<form name="earning_calculator">
<body>
<fieldset>
  <legend>Earnings Calculator</legend>
</fieldset>

<table width="" border="1">
  <tbody>
    <tr>
    <tr>
      <td scope="col">Wage by Employer</td>

      <td><select id="Line_One" name="Line_One" onchange="
      document.getElementById('value1').value=this.value;
      document.getElementById('e_earning').value = (120 - document.getElementById('value1').value) * document.getElementById('value2').value;
      this.value = this.value.toFixed(2);
      this.value='$' + this.value;
      document.getElementById('w_earning').value = (document.getElementById('value1').value -0) - 20 -
      document.getElementById('value3').value
      document.getElementById('w_earning').value = document.getElementById('value1').value - 20 - document.getElementById('value3').value">
          <option value="" selected="selected"> Select </option>
          <option value="20"> 20 points </option>
          <option value="25"> 25 points </option>
          <option value="30"> 30 points </option>
          <option value="35"> 35 points </option>
          <option value="40"> 40 points </option>
          <option value="45"> 45 points </option>
          <option value="50"> 50 points </option>
          <option value="55"> 55 points </option>
          <option value="60"> 60 points </option>
          <option value="65"> 65 points </option>
          <option value="70"> 70 points </option>
          <option value="75"> 75 points </option>
          <option value="80"> 80 points </option>
          <option value="85"> 85 points </option>
          <option value="90"> 90 points </option>
          <option value="95"> 95 points </option>
          <option value="100"> 100 points </option>
          <option value="105"> 105 points </option>
          <option value="110"> 110 points </option>
          <option value="115"> 115 points </option>
          <option value="120"> 120 points </option>
        </select></td>
    </tr>
    <tr>
      <td scope="col">Effort by Worker</td>
      <td><select id="Line_Two" name="Line_Two" onchange=
      "document.getElementById('value2').value=this.value;
      document.getElementById('value3').value = this.getAttribute('data-cost');
      document.getElementById('e_earning').value = (120 - document.getElementById('value1').value) * document.getElementById('value2').value;
      document.getElementById('effort_cost').value = document.getElementById('value3').value;
      document.getElementById('w_earning').value = document.getElementById('value1').value - 20 - document.getElementById('value3').value">
          <option value="" data-cost="" selected="selected"> Select </option>
          <option value="0.1" data-cost = "0"> 0.1 </option>
          <option value="0.2" data-cost = "1"> 0.2 </option>
          <option value="0.3" data-cost = "2"> 0.3 </option>
          <option value="0.4" data-cost = "4"> 0.4 </option>
          <option value="0.5" data-cost = "6"> 0.5 </option>
          <option value="0.6" data-cost = "8"> 0.6 </option>
          <option value="0.7" data-cost = "10"> 0.7 </option>
          <option value="0.8" data-cost = "12"> 0.8 </option>
          <option value="0.9" data-cost = "15"> 0.9 </option>
          <option value="1" data-cost = "18"> 1 </option>
      </select></td>
    </tr>
  </tbody>
</table>
  <fieldset>

  <input type="hidden" id="value1">
  <input type="hidden" id="value2">
  <input type="hidden" id="value3">

    <div class="form-row">
      <div class="label-container">
        <p><label for="e_earning">Employer Earning</label></p>
        <p><label for="w_earning">Worker Earning</label></p>
        <p><label for="effort_cost">Effort Cost</label></p>
      </div>
      <div class="input-container">
        <p><input type="text" id="e_earning" name="e_earning" placeholder="0.00 readonly" disabled></p>
        <p><input type="text" id="w_earning" name="w_earning" placeholder="0.00 readonly" disabled></p>
        <p><input type="text" id="effort_cost" name="effort_cost" placeholder="0.00 readonly" disabled></p>
      </div>
    </div>
  </fieldset>

</body>
</form>

上述代码的问题在于我提取 effort_cost 的方式，特别是在 onchange 事件下的行 document.getElementById('value3').value = this.getAttribute('data-cost'); 中。该行没有按照我的意愿选择相应的 "Effort Cost" 。我将不胜感激。

Answer 1

见上面的评论。

document.getElementById('value3').value =
    this.options[this.selectedIndex].getAttribute('data-cost');

在 HTML 形式的 onchange 事件中使用数据值

Using data value in an onchange event in a HTML form

html

html-select

onchange