选择后自动填充输入选择选项Javascript DOM

Question

我想创建一些表格与自动填充价格在输入框，但我不知道如何实现到我的代码。首先我有选择选项，然后选择选项后，输入框上的价格会自动生成，然后我输入折扣值，然后总价格会自动生成（基本价格-折扣%）。这是我的代码：

null

function bali() {
  var e = document.getElementById("bali");
  e.addEventListener("change", function() {
    var val = 7000000;
    document.getElementById("harga").value = val;
  })
};

<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">
          <option onchange="bali()" id="bali" value="">Paket Tour Bali</option>
          <option value="">Paket Tour Korea</option>
          <option value="">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"></td>
    </tr>

  </table>
</form>

null

Answer 1

您添加的事件有误。不能在选项本身上添加AddEventListener更改。永远不会变。Select element does。

将onchange事件移动到其中。onchange=“MyFunction(event)”并将event传递给它。则可以获取该事件和所选选项值：

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

则您可以根据以下条件设置条件：

if (event.target.value === "Bali") {
    document.getElementById("harga").value = 7000;

...

我还在HTML中添加了值以使其工作。另外，我建议添加一个默认的pres selected选项：

  <option selected disabled>...</option>

这也可以用其他方法来完成。

null

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

  if (event.target.value === "Bali") {
    document.getElementById("harga").value = 7000;
  } else if (event.target.value === "Korea") {
    document.getElementById("harga").value = 8000;
  } else if (event.target.value === "Eropa") {
    document.getElementById("harga").value = 9000;
  }

};

<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"></td>
    </tr>

  </table>
</form>