我有一个表单,我有 2 个选择菜单和一个输入菜单
<form method="post" action="">
<label class="col-sm-3 control-label" for="textinput">Civil Works</label>
<div class="col-sm-3">
<select id="cpercentage" name="txt_cpercentage" class="form-control" onkeyup="calc()">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Electrical Works</label>
<div class="col-sm-3">
<select id="epercentage" name="txt_epercentage" class="form-control" >
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Mechanical Works</label>
<div class="col-sm-3">
<input type="text" id="mpercentage" name="txt_mpercentage" class="form-control" readonly >
</div>
</form>
我在 javascript 中使用这段代码来计算差异,这个差异将是 100-(select1+select2) 而无需单击任何按钮
<script>
function calc() {
var textValue1 = document.getElementById('cpercentage').value;
var textValue2 = document.getElementById('epercentage').value;
document.getElementById('mpercentage').value = 100-(textValue1 + textValue2);
}
</script>
但我在输入字段中没有任何结果我不知道为什么任何人都可以帮助解决这个问题 经过搜索,我在 stackoverflow 中看到了这个 link 但也没有帮助
最佳答案
绑定(bind)change
事件来选择元素,
document.getElementById('cpercentage').addEventListener('change', calc);
document.getElementById('epercentage').addEventListener('change', calc);
但是,正如您标记的 jquery , 你可以使用
$('#cpercentage, #epercentage').on('change', calc )
window.onload = function() {
var cpercentage = document.getElementById('cpercentage');
var epercentage = document.getElementById('epercentage');
//Bind event handler
cpercentage.addEventListener('change', calc);
epercentage.addEventListener('change', calc);
function calc() {
var textValue1 = Number(cpercentage.value) || 0;
var textValue2 = Number(epercentage.value) || 0;
document.getElementById('mpercentage').value = 100 - (textValue1 + textValue2);
}
}
<form method="post" action="">
<label class="col-sm-3 control-label" for="textinput">Civil Works</label>
<div class="col-sm-3">
<select id="cpercentage" name="txt_cpercentage" class="form-control">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Electrical Works</label>
<div class="col-sm-3">
<select id="epercentage" name="txt_epercentage" class="form-control">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Mechanical Works</label>
<div class="col-sm-3">
<input type="text" id="mpercentage" name="txt_mpercentage" class="form-control" readonly>
</div>
</form>
关于javascript - 没有按钮的两个输入值之间的差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42003706/