我想创建一些表格与自动填充价格在输入框,但我不知道如何实现到我的代码。首先我有选择选项,然后选择选项后,输入框上的价格会自动生成,然后我输入折扣值,然后总价格会自动生成(基本价格-折扣%)。这是我的代码:
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
您添加的事件有误。不能在选项
本身上添加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>