自动填充总价使用 javascript dom

Posted 2023-03-13

【中文标题】自动填充总价使用 javascript dom

【英文标题】：Auto fill total price use javascript dom

【发布时间】：2021-07-17 20:53:27

【问题描述】：

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

这是我的 html：

<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;
  

;

【参考方案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>