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

将document.getElementById('cpercentage').addEventListener('change', calc); document.getElementById('epercentage').addEventListener('change', calc);事件绑定到选择元素

$('#cpercentage, #epercentage').on('change', calc )

但是，正如您标记了jquery，您可以使用

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

＆＃13;

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

＆＃13;

text-anchor

＆＃13;

Answer 2

您好使用此document.getElementById('cpercentage').value获取字符串所以你必须将它解析成整数来执行数学运算。

 <select id="epercentage" name="txt_epercentage" class="form-control" onchange="calc()" >

我试图通过select onchange调用你的函数，它运行正常希望这会有所帮助。

    <html>
<head></head><body>
<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" onchange="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">Mechanical Works</label>  
  <div class="col-sm-3">
    <input type="text" id="mpercentage" name="txt_mpercentage" class="form-control" readonly > 

  </div>
    </form>
</body>
<script>

function calc() {
    var textValue1 = parseInt(document.getElementById('cpercentage').value);
    var textValue2 = parseInt(document.getElementById('epercentage').value);
    var x = 100-(textValue1+textValue2);
    alert(x);
    document.getElementById('mpercentage').value=x;

}
</script>
</html>

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

2 个答案: