如何在重复的输入类型文本中添加金额并显示添加的金额

Question

我正在尝试添加重复的金额值并在输入文本中显示输出（get_amount），这是在单击 addmilistone 按钮时。 例如; 当用户单击添加按钮时，该字段会重复，并且当用户在两个输入中输入金额时，其添加并显示在输入类型文本中。

HTML 当用户点击+addmilistone时，下面的代码是重复的

<div id="fieldset"  class="row">
 <div class="modal-body">
    <input type="button" class="btn btn-primary" id="addmilistone" value="+addmilistone"/>

      <div id="fieldset"  class="row">
      <div class="col-sm-4">
        <div class="form-group">
          <label for="m_description">Description</label>
          <input type="text" name="m_description" id="m_description" placeholder="milestone Description" class="form-control">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label for="ddate">Due Date</label>
          <input type="date" name="ddate" id="ddate" class="form-control">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label for="amount">Amount</label>
          <input type="text"  id="i_amount"  class="form-control">
        </div>
      </div>
    </div>
  </div>
</div>

显示输入类型 该代码是当输入类型id="i_amount" 中的一个输入量时显示计算的位置，无论是在单行输入还是重复输入。

  <input type="number" id="get_amount" class="form-control" name="">

脚本

此脚本正在复制输入行

<script type="text/javascript">
  (function(){
    
    var button = document.getElementById("addmilistone");
    
    button.addEventListener("click", function() {
        var sourceNode = document.getElementById("fieldset");
        var node = duplicateNode(sourceNode, ["id", "name", "placeholder"]);
        
        sourceNode.parentNode.appendChild(node);
    }, false);

    
    var counter = 0;
    function duplicateNode(/*DOMNode*/sourceNode, /*Array*/attributesToBump) {
        counter++;
        var out = sourceNode.cloneNode(true);
        if (out.hasAttribute("id")) { out["id"] = bump(out["id"]); }
        var nodes = out.getElementsByTagName("*");
        
        for (var i = 0, len1 = nodes.length; i < len1; i++) {
            var node = nodes[i];
            for (var j = 0, len2 = attributesToBump.length; j < len2; j++) {
                var attribute = attributesToBump[j];
                if (node.hasAttribute(attribute)) {
                    node[attribute] = bump(node[attribute]);
                }
            }
        }
        
        function bump(/*String*/str) {
            return str + "_" + counter;
        }
      
        return out;
    }

})();

</script>
<script>
$('#i_amount').keyup(function(){
    $('#get_amount').val(this.value);
});
</script>

Answer 1

在输入失焦后进行计算.. 在您的代码中，您只是选择了第一个输入

代码

(function () {

        var button = document.getElementById("addmilistone");

        button.addEventListener("click", function () {
            var sourceNode = document.getElementById("fieldset");
            var node = duplicateNode(sourceNode, ["id", "name", "placeholder"]);

            sourceNode.parentNode.appendChild(node);
        }, false);


        var counter = 0;

        function duplicateNode( /*DOMNode*/ sourceNode, /*Array*/ attributesToBump) {
            counter++;
            var out = sourceNode.cloneNode(true);
            if (out.hasAttribute("id")) {
                out["id"] = bump(out["id"]);
            }
            var nodes = out.getElementsByTagName("*");

            for (var i = 0, len1 = nodes.length; i < len1; i++) {
                var node = nodes[i];
                for (var j = 0, len2 = attributesToBump.length; j < len2; j++) {
                    var attribute = attributesToBump[j];
                    if (node.hasAttribute(attribute)) {
                        node[attribute] = bump(node[attribute]);
                    }
                }
            }

            function bump( /*String*/ str) {
                return str + "_" + counter;
            }

            return out;
        }

    })();
    $('#get_amount').val(0)
    $('body').on('focusout','[id^="i_amount"]',function () {
        
        var sum = Number($('#get_amount').val());
        sum += Number($(this).val());
        $('#get_amount').val(sum);
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

    <div class="container">
        
   
    <div class="row">
        <div class="row col-12">

            <input type="button" class="btn btn-primary" id="addmilistone" value="+addmilistone" />
        </div>

            <div id="fieldset" class="row">
                <div class=" col-sm-4 ">
                    <div class="form-group">
                        <label for="m_description">Description</label>
                        <input type="text" name="m_description" id="m_description" placeholder="milestone Description"
                            class="form-control">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="ddate">Due Date</label>
                        <input type="date" name="ddate" id="ddate" class="form-control">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="amount">Amount</label>
                        <input type="text" id="i_amount" class="form-control amount">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">

            <input type="number" id="get_amount" class="form-control" name="">
        </div>
    </div>
</div>