文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >JavaScript不适用于另一个JavaScripted输入字段

问JavaScript不适用于另一个JavaScripted输入字段
EN

Stack Overflow用户
提问于 2022-01-12 10:31:27
回答 3查看 59关注 0票数 0

我试图使用JavaScript在网页中自动输入sum字段。我的javascript函数部分工作。但是，当手动更改.change时会触发它，而如果它被另一个JavaScript函数更改则不会触发它。即使不是手动更改，我如何触发它？

代码语言：javascript
复制
<html>
    <head>
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Expires" content="0">
        <meta charset="utf-8">
        <link rel="icon" type="image/png" href="title-icon.png"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
            input{width: 70px;text-align-last: center;}
            .icon{margin-right:3%;font-size:48px;color:red; animation-name: thi;animation-iteration-count: infinite; animation-duration: 3s;}
            @keyframes thi {from{color:red} to {color:white}}
        </style>
    </head>
    <body><br>
        <div style="margin:5%">
            <div class="row">
                <div class="col-4 border border-danger bg-primary">
                    <div class="text-center">Section A</div>
                </div>
                <div class="col-4 border border-danger bg-success">
                    <div class="text-center">Section B</div>
                </div>
                <div class="col-4 border border-danger bg-secondary">
                    <div class="text-center">Grand Total</div>
                </div>
            </div>
            <div class="row">
                <div class="col-4 border border-danger bg-primary">
                    <div class="row text-center">
                        <div class="col-4">
                            <div>Male</div>
                        </div>
                        <div class="col-4">
                            <div>Femle</div>
                        </div>
                        <div class="col-4">
                            <div>Total</div>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-4">
                            <div><input type="text" class="male" id="maleA"></div>
                        </div>
                        <div class="col-4">
                            <div><input type="text" class="female" id="femaleA"></div>
                        </div>
                        <div class="col-4">
                            <div><input type="text" class="total" id="totalA" readonly disabled="disabled"></div>
                        </div>
                    </div>
                </div>
                
                <div class="col-4 border border-danger bg-success">
                    <div class="row text-center">
                        <div class="col-4">
                            <div>Male</div>
                        </div>
                        <div class="col-4">
                            <div>Femle</div>
                        </div>
                        <div class="col-4">
                            <div>Total</div>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-4">
                            <div><input type="text" class="male" id="maleB"></div>
                        </div>
                        <div class="col-4">
                            <div><input type="text" class="female" id="femaleB"></div>
                        </div>
                        <div class="col-4">
                            <div><input type="text" class="total" id="totalB" readonly disabled="disabled"></div>
                        </div>
                    </div>
                </div>
                
                <div class="col-4 border border-danger bg-secondary">
                    <div class="row text-center">
                        <div class="col-4">
                            <div>Male</div>
                        </div>
                        <div class="col-4">
                            <div>Femle</div>
                        </div>
                        <div class="col-4">
                            <div>Total</div>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-4">
                            <div><input type="text" class="male" id="maletotal" readonly disabled="disabled"></div>
                        </div>
                        <div class="col-4">
                            <div><input type="text" class="female" id="femaletotal" readonly disabled="disabled"></div>
                        </div>
                        <div class="col-4">
                            <div><input type="text" class="total" id="totalall" readonly disabled="disabled"></div>
                        </div>
                    </div><br>
                </div><br>
            </div>
            <div class="row text-right">
                <div class="col-12"><i class='icon fa fa-arrow-up'></i></div>
            </div>
            <div class="row text-right">
                <div class="col-12">Total of 'Grand Total' is not working!</div>
            </div>
            <br>
        </div>
    </body>
    <script>
        $(document).ready(function()
        { // working
            $('#maleA,#femaleA').change(function()
            {
                maleA = $('#maleA').val();
                femaleA = $('#femaleA').val();
                allA = Number(maleA)+Number(femaleA);
                $('#totalA').val(allA);
            }),
            $('#maleB,#femaleB').change(function()
            {
                maleB = $('#maleB').val();
                femaleB = $('#femaleB').val();
                allB = Number(maleB)+Number(femaleB);
                $('#totalB').val(allB);
            }),

            $('#maleA,#maleB').change(function()
            {
                maleA = $('#maleA').val();
                maleB = $('#maleB').val();
                allmale = Number(maleA)+Number(maleB);
                $('#maletotal').val(allmale);
            }),
            $('#femaleA,#femaleB').change(function()
            {
                femaleA = $('#femaleA').val();
                femaleB = $('#femaleB').val();
                allfemale = Number(femaleA)+Number(femaleB);
                $('#femaletotal').val(allfemale);
            }),

            //problem is here
            $('#maletotal,#femaletotal').change(function()
            {
                allmale = $('#maletotal').val(); //feed by javascript
                allfemale = $('#femaletotal').val(); //feed by javascript
                alltotal = Number(allmale)+Number(allfemale);
                $('#totalall').val(allA);
            })
        })
    </script>
</html>

请帮助我找出错误或提出更好的解决方案。

javascript
jquery
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-01-12 10:37:08

主要问题是，以编程方式设置输入的value不会引发DOM中的事件，因此上一节中的总字段上的change事件处理程序永远不会运行。

要纠正这一点，您可以使用jQuery的trigger()方法在设置change事件的val()之后在字段中手动引发一个val()事件。

另外，请注意，$('#totalall').val(allA);需要改为$('#totalall').val(alltotal);。

​

代码语言：javascript
复制
$(document).ready(function() { // working
  $('#maleA,#femaleA').change(function() {
      maleA = $('#maleA').val();
      femaleA = $('#femaleA').val();
      allA = Number(maleA) + Number(femaleA);
      $('#totalA').val(allA).trigger('change');
    }),
    
    $('#maleB,#femaleB').change(function() {
      maleB = $('#maleB').val();
      femaleB = $('#femaleB').val();
      allB = Number(maleB) + Number(femaleB);
      $('#totalB').val(allB).trigger('change');
    }),

    $('#maleA,#maleB').change(function() {
      maleA = $('#maleA').val();
      maleB = $('#maleB').val();
      allmale = Number(maleA) + Number(maleB);
      $('#maletotal').val(allmale).trigger('change');
    }),
    $('#femaleA,#femaleB').change(function() {
      femaleA = $('#femaleA').val();
      femaleB = $('#femaleB').val();
      allfemale = Number(femaleA) + Number(femaleB);
      $('#femaletotal').val(allfemale).trigger('change');
    }),

    //problem is here
    $('#maletotal,#femaletotal').change(function() {
      allmale = $('#maletotal').val(); //feed by javascript
      allfemale = $('#femaletotal').val(); //feed by javascript
      alltotal = Number(allmale) + Number(allfemale);
      $('#totalall').val(alltotal);
    })
})
代码语言：javascript
复制
input {
  width: 70px;
  text-align-last: center;
}
代码语言：javascript
复制
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div style="margin:5%">
  <div class="row">
    <div class="col-4 border border-danger bg-primary">
      <div class="text-center">Section A</div>
    </div>
    <div class="col-4 border border-danger bg-success">
      <div class="text-center">Section B</div>
    </div>
    <div class="col-4 border border-danger bg-secondary">
      <div class="text-center">Grand Total</div>
    </div>
  </div>
  <div class="row">
    <div class="col-4 border border-danger bg-primary">
      <div class="row text-center">
        <div class="col-4">
          <div>Male</div>
        </div>
        <div class="col-4">
          <div>Femle</div>
        </div>
        <div class="col-4">
          <div>Total</div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-4">
          <div><input type="text" class="male" id="maleA"></div>
        </div>
        <div class="col-4">
          <div><input type="text" class="female" id="femaleA"></div>
        </div>
        <div class="col-4">
          <div><input type="text" class="total" id="totalA" readonly disabled="disabled"></div>
        </div>
      </div>
    </div>

    <div class="col-4 border border-danger bg-success">
      <div class="row text-center">
        <div class="col-4">
          <div>Male</div>
        </div>
        <div class="col-4">
          <div>Femle</div>
        </div>
        <div class="col-4">
          <div>Total</div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-4">
          <div><input type="text" class="male" id="maleB"></div>
        </div>
        <div class="col-4">
          <div><input type="text" class="female" id="femaleB"></div>
        </div>
        <div class="col-4">
          <div><input type="text" class="total" id="totalB" readonly disabled="disabled"></div>
        </div>
      </div>
    </div>

    <div class="col-4 border border-danger bg-secondary">
      <div class="row text-center">
        <div class="col-4">
          <div>Male</div>
        </div>
        <div class="col-4">
          <div>Femle</div>
        </div>
        <div class="col-4">
          <div>Total</div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-4">
          <div><input type="text" class="male" id="maletotal" readonly disabled="disabled"></div>
        </div>
        <div class="col-4">
          <div><input type="text" class="female" id="femaletotal" readonly disabled="disabled"></div>
        </div>
        <div class="col-4">
          <div><input type="text" class="total" id="totalall" readonly disabled="disabled"></div>
        </div>
      </div><br>
    </div><br>
  </div>
</div>

​

但是，您可以通过使用元素上的公共类来根据行为对它们进行分组，从而提高代码质量和可扩展性。这使得JS更加简洁，并将用于无限数量的“节”块。试试这个：

​

代码语言：javascript
复制
jQuery($ => {
  let $inputs = $('.input');
  let $totalMale = $('#overall-male');
  let $totalFemale = $('#overall-female');
  let $totalOverall = $('#overall-total');

  let updateRowTotal = $row => {
    let maleCount = parseInt($row.find('.male').val(), 10) || 0;
    let femaleCount = parseInt($row.find('.female').val(), 10) || 0;
    $row.find('.total').val(maleCount + femaleCount);
  }
  
  let updateOverallTotal = () => {
    let maleCount = 0;    
    $inputs.filter('.male').each((i, el) => maleCount += (parseInt(el.value, 10) || 0));
    $totalMale.val(maleCount);
    
    let femaleCount = 0;
    $inputs.filter('.female').each((i, el) => femaleCount += (parseInt(el.value, 10) || 0));
    $totalFemale.val(femaleCount);
    
    $totalOverall.val(maleCount + femaleCount);
  }

  $inputs.on('input', e => {
    updateRowTotal($(e.currentTarget).closest('.row'));
    updateOverallTotal();
  });
})
代码语言：javascript
复制
input {
  width: 70px;
  text-align-last: center;
}
代码语言：javascript
复制
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div style="margin:5%">
  <div class="row">
    <div class="col-4 border border-danger bg-primary">
      <div class="text-center">Section A</div>
    </div>
    <div class="col-4 border border-danger bg-success">
      <div class="text-center">Section B</div>
    </div>
    <div class="col-4 border border-danger bg-secondary">
      <div class="text-center">Grand Total</div>
    </div>
  </div>
  <div class="row">
    <div class="col-4 border border-danger bg-primary">
      <div class="row text-center">
        <div class="col-4">
          <div>Male</div>
        </div>
        <div class="col-4">
          <div>Femle</div>
        </div>
        <div class="col-4">
          <div>Total</div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-4">
          <div><input type="text" class="input male"></div>
        </div>
        <div class="col-4">
          <div><input type="text" class="input female"></div>
        </div>
        <div class="col-4">
          <div><input type="text" class="total" readonly disabled="disabled"></div>
        </div>
      </div>
    </div>

    <div class="col-4 border border-danger bg-success">
      <div class="row text-center">
        <div class="col-4">
          <div>Male</div>
        </div>
        <div class="col-4">
          <div>Femle</div>
        </div>
        <div class="col-4">
          <div>Total</div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-4">
          <div><input type="text" class="input male"></div>
        </div>
        <div class="col-4">
          <div><input type="text" class="input female"></div>
        </div>
        <div class="col-4">
          <div><input type="text" class="total" readonly disabled="disabled"></div>
        </div>
      </div>
    </div>

    <div class="col-4 border border-danger bg-secondary">
      <div class="row text-center">
        <div class="col-4">
          <div>Male</div>
        </div>
        <div class="col-4">
          <div>Femle</div>
        </div>
        <div class="col-4">
          <div>Total</div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-4">
          <div><input type="text" id="overall-male"></div>
        </div>
        <div class="col-4">
          <div><input type="text" id="overall-female"></div>
        </div>
        <div class="col-4">
          <div><input type="text" id="overall-total" readonly disabled="disabled"></div>
        </div>
      </div><br>
    </div><br>
  </div>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2022-01-12 10:56:56

更改事件仅在用户操作上触发。您可以使用上面的答案中提到的.trigger或者调用最后的方法，如下所示，

代码语言：javascript
复制
$(document).ready(function()
    { 
        $('#maleA,#femaleA').change(function()
        {
            maleA = $('#maleA').val();
            femaleA = $('#femaleA').val();
            allA = Number(maleA)+Number(femaleA);
            $('#totalA').val(allA);
            changeAllTotal();
        }),
        $('#maleB,#femaleB').change(function()
        {
            maleB = $('#maleB').val();
            femaleB = $('#femaleB').val();
            allB = Number(maleB)+Number(femaleB);
            $('#totalB').val(allB);
            changeAllTotal();
        }),

        $('#maleA,#maleB').change(function()
        {
            maleA = $('#maleA').val();
            maleB = $('#maleB').val();
            allmale = Number(maleA)+Number(maleB);
            $('#maletotal').val(allmale);
             changeAllTotal();
        }),
        $('#femaleA,#femaleB').change(function()
        {
        
            femaleA = $('#femaleA').val();
            femaleB = $('#femaleB').val();
            allfemale = Number(femaleA)+Number(femaleB);
            $('#femaletotal').val(allfemale);
            changeAllTotal();
        })
        function changeAllTotal()
        {
            allmale = $('#maletotal').val(); //feed by javascript
            allfemale = $('#femaletotal').val(); //feed by javascript
            alltotal = Number(allmale)+Number(allfemale);
            $('#totalall').val(alltotal);
        }
        
    })
票数 1
EN

Stack Overflow用户

发布于 2022-01-12 11:29:20

不可否认的是，下面的内容可能显得相当简洁。但它表明，代码可以以更短的方式完成，使其能够处理更宽的表(而不需要ids)。

​

代码语言：javascript
复制
const Asum=DOMArr=>DOMArr.reduce((a,c)=>((a+=+c.value),a),0); // summation utility function
// find arrays of males, females and their summation fields:
const males=$(".male").get(),msum =males.pop(), females=$(".female").get(),fsum=females.pop();
// take care of all summation fields leading to grand total: gtot
let tots = $(".total").get(), gtot=tots.pop();
tots = tots.map(t=>([t,$(t).closest(".row").find("input:not([readonly])").get()]));

$(document).on("input","input",function(){
  [[msum,males],[fsum,females],...tots,[gtot,[msum,fsum]]].forEach(([e,a])=>e.value=Asum(a))
})
代码语言：javascript
复制
input {
  width: 40px;
  text-align-last: center;
}
代码语言：javascript
复制
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div style="margin:5%">
  <div class="row">
    <div class="col-3 border border-danger bg-primary">
      <div class="text-center">Section A</div>
    </div>
    <div class="col-3 border border-danger bg-success">
      <div class="text-center">Section B</div>
    </div>
    <div class="col-3 border border-danger bg-primary">
      <div class="text-center">Section C</div>
    </div>
    <div class="col-3 border border-danger bg-secondary">
      <div class="text-center">Grand Total</div>
    </div>
  </div>
  <div class="row">
    <div class="col-3 border border-danger bg-primary">
      <div class="row text-center">
        <div class="col-3">
          <div>Male</div>
        </div>
        <div class="col-3">
          <div>Femle</div>
        </div>
        <div class="col-3">
          <div>Total</div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-3">
          <div><input type="text" class="male" id="maleA"></div>
        </div>
        <div class="col-3">
          <div><input type="text" class="female" id="femaleA"></div>
        </div>
        <div class="col-3">
          <div><input type="text" class="total" id="totalA" readonly disabled="disabled"></div>
        </div>
      </div>
    </div>

    <div class="col-3 border border-danger bg-success">
      <div class="row text-center">
        <div class="col-3">
          <div>Male</div>
        </div>
        <div class="col-3">
          <div>Femle</div>
        </div>
        <div class="col-3">
          <div>Total</div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-3">
          <div><input type="text" class="male" id="maleB"></div>
        </div>
        <div class="col-3">
          <div><input type="text" class="female" id="femaleB"></div>
        </div>
        <div class="col-3">
          <div><input type="text" class="total" id="totalB" readonly disabled="disabled"></div>
        </div>
      </div>
    </div>
    
    <div class="col-3 border border-danger bg-primary">
      <div class="row text-center">
        <div class="col-3">
          <div>Male</div>
        </div>
        <div class="col-3">
          <div>Femle</div>
        </div>
        <div class="col-3">
          <div>Total</div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-3">
          <div><input type="text" class="male"></div>
        </div>
        <div class="col-3">
          <div><input type="text" class="female"></div>
        </div>
        <div class="col-3">
          <div><input type="text" class="total" readonly disabled="disabled"></div>
        </div>
      </div>
    </div>

    <div class="col-3 border border-danger bg-secondary">
      <div class="row text-center">
        <div class="col-3">
          <div>Male</div>
        </div>
        <div class="col-3">
          <div>Femle</div>
        </div>
        <div class="col-3">
          <div>Total</div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-3">
          <div><input type="text" class="male" id="maletotal" readonly disabled="disabled"></div>
        </div>
        <div class="col-3">
          <div><input type="text" class="female" id="femaletotal" readonly disabled="disabled"></div>
        </div>
        <div class="col-3">
          <div><input type="text" class="total" id="totalall" readonly disabled="disabled"></div>
        </div>
      </div><br>
    </div><br>
  </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70679986

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档