javascript - 没有按钮的两个输入值之间的差异

Question

我有一个表单，我有 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但也没有帮助

Answer 1

绑定(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>