Question

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

“雇主收入”直接计算它是由公式给出的 $(120-Wage)*Effort$ 。然而，工人收入略微复杂，因为对于“努力”的每个值，将存在相应的“努力成本”，用户将永远不会选择“努力成本”，但是努力和努力成本之间的关系是预先确定的。 “工人收入”由公式$ 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');中。这条线没有像我希望的那样选择相应的“努力成本”。我将不胜感激任何帮助。

Answer 1

见上面的评论。

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

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

1 个答案: