自动填充总价使用javascript dom

Question

嘿，我想做一些计算器，可以用自动填充来计算总价。首先我选择选项选择计划，然后选择计划后将自动生成基本价格，然后我输入折扣值，然后将自动生成总价格（基本价格折扣）。如何在我的代码中实现这一点：

这里是我的HTML：

html prettyprint-override"><form name="cal" action="">
  <table>
    <caption>
      <h1>
        Kalkulator
      </h1>
      <h3>
        Paket Wisata Imam Tour
      </h3>
    </caption>
    <tr>
      <td>Nama Paket Tour</td>
      <td>:</td>
      <td>
        <select name="" id="paket" onchange="myFunction(event)">
          <option selected disabled>...</option>
          <option value="Bali">Paket Tour Bali</option>
          <option value="Korea">Paket Tour Korea</option>
          <option value="Eropa">Paket Tour Eropa</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Harga Paket</td>
      <td>:</td>
      <td>Rp.<input id="harga" name="harga" type="number" value="0"></td>
    </tr>
    <tr>
      <td>Diskon</td>
      <td>:</td>
      <td><input id="diskon" name="diskon" type="number">%</td>
    </tr>
    <tr>
      <td>Total Bayar</td>
      <td>:</td>
      <td><input id="tot" name="tot" type="text" value=""></td>
    </tr>

  </table>
</form>

我的JS：

function myFunction(event) {
  console.log(event.target.value)

  if (event.target.value === "Bali") {
    document.getElementById("harga").value = 700000;
  } else if (event.target.value === "Korea") {
    document.getElementById("harga").value = 1500000;
  } else if (event.target.value === "Eropa") {
    document.getElementById("harga").value = 4000000;
  }

};

Answer 1

您可以将事件侦听器添加到paket和diskon字段中。确保字段具有这些名称。

const form = document.forms['cal'];

const hargaMap = {
  Bali: 700000,
  Korea: 1500000,
  Eropa: 4000000
};

const main = () => {
  form.elements.paket.addEventListener('change', onPaketChange);
  form.elements.diskon.addEventListener('change', onDiskonChange);
  form.elements.diskon.addEventListener('input', onDiskonChange);
};

const applyDiscount = (amount, discount) => amount - (amount * discount);

const onPaketChange = e => {
  form.elements.harga.value = hargaMap[e.target.value] || 0;
};

const onDiskonChange = e => {
  const harga = parseInt(form.elements.harga.value || '0', 10);
  const diskon = parseInt(form.elements.diskon.value || '0', 10) / 100;
  form.elements.tot.value = applyDiscount(harga, diskon).toFixed(2);
};

main();

<form name="cal" action="">
  <table>
    <caption>
      <h1>
        Kalkulator
      </h1>
      <h3>
        Paket Wisata Imam Tour
      </h3>
    </caption>
    <tr>
      <td>Nama Paket Tour</td>
      <td>:</td>
      <td>
        <select name="paket" id="paket">
          <option selected disabled>...</option>
          <option value="Bali">Paket Tour Bali</option>
          <option value="Korea">Paket Tour Korea</option>
          <option value="Eropa">Paket Tour Eropa</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Harga Paket</td>
      <td>:</td>
      <td>Rp.<input id="harga" name="harga" type="number" value="0"></td>
    </tr>
    <tr>
      <td>Diskon</td>
      <td>:</td>
      <td><input id="diskon" name="diskon" type="number" min="0" value="0">%</td>
    </tr>
    <tr>
      <td>Total Bayar</td>
      <td>:</td>
      <td><input id="tot" name="tot" type="text" value="0.00"></td>
    </tr>
  </table>
</form>