在 HTML 表单的 onchange 事件中使用数据值答案

【问题标题】：Using data value in an onchange event in a HTML form在 HTML 表单的 onchange 事件中使用数据值
【发布时间】：2018-11-23 15:09:36
【问题描述】：

我正在创建一种计算器，人们将在其中选择两个值并计算相应的收入。一个人将从“雇主工资”和“工人工作量”字段的值下拉列表中进行选择。需要计算的字段是“Employer Earning”和“Worker Earning”。

“Employer Earning”是直接计算它由公式给出 $(120-Wage)*Effort$ 。但是 Worker Earnings 稍微复杂一些，因为对于“Effort”的每个值，都会有相应的“Effort Cost”，用户永远不会选择“Effort Cost”，但是Effort 和Effort Cost 之间的关系是预先确定的。 “工人收入”由公式 $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>

上述代码的问题在于我提取努力成本的方式，特别是在 onchange 事件下的 document.getElementById('value3').value = this.getAttribute('data-cost'); 行中。这条线没有像我想要的那样选择相应的“努力成本”。对于这方面的任何帮助，我将不胜感激。

【问题讨论】：

您必须执行类似this.options[this.selectedIndex]...get attribute 的操作。现在，您正在尝试获取 select 的属性，而不是 option。

标签： html html-select onchange

【解决方案1】：

见上面的评论。

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

【讨论】：