入力を計算する簡単な方法は、誰かに説明することができます

-1

新しい入力を追加した後にどのコードをどのように書くべきですか？各入力に数字を入れる同じユーザー同じコードは、入力に入力された合計数を計算しますか？誰でもアイデアを持っていますか？入力を計算する簡単な方法は、誰かに説明することができます

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
    </head> 
    <body> 
     <button id="add">add</button> 
     <ol id="items"></ol> 
     <div id="sum"></div> 
    </body> 
</html> 

JS 

var id = "1"; 
var valarray = []; 
var sum; 

$(document).ready(function() 
{ 
    $("#add").on("click" , function() 
    { 
    $("#items").append('<li><input/><button     class="btn" dt="'+id+'">'+id+'</button></li>'); 
    id++; 
$("input").keyup(function(){ 
    valarray = []; 
    var val = $(this).val() 
    valarray.push(val); 
    console.log(val+ "\n" + valarray); 
}) 

    }) 

$("#items").on("click",".btn" , function() 
{ 
    var index = $(this).attr("dt"); 
    console.log (index); 
    $(this).parent().remove(); 
    return;  
})  
})

出典

2017-05-27 L.Shabtai

あなたが達成しようとしていることと達成しようとしている問題についてもっと詳しく説明してください。 [ask] – charlietfl

私が探していた解決策が見つかりませんでした。誰かが似たような質問をしたのを見ました。彼は各機能を使用していました。しかし、クリックごとに別のオブジェクトが追加されるため、少し違いがあります。私は解決方法を知る必要があります。オブジェクトが追加されるたびにオブジェクトが配列に入る必要があります。その配列は実際に私にすべてのオブジェクトの合計を与えます。 –

[詳細を編集]（https://stackoverflow.com/posts/44216849/edit）これらの詳細は非常に具体的です – charlietfl

私は、これはあなたが探しているものであると思います。

私はすべての入力をループして合計を計算する計算機能を使用しました。また、入力タイプをnumberに変更して、コードで余分な検証が不要になりました。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
</head> 
<body> 
    <button id="add">add</button> 
    <ol id="items"></ol> 
    <div id="sum"></div> 
</body> 
<script> 

    var id = "1"; 
    var valarray = []; 
    var sum; 
    $(document).ready(function() { 

     $("#add").on("click" , function() { 
      $("#items").append('<li><input type="number" id="'+id+'"/><button class="btn" dt="'+id+'">' + id + '</button></li>'); 
      id++; 
      $("input").keyup(function (e){ 
       calculate(); 
      }); 
    }); 

    $("#items").on("click",".btn" , function(){ 
     var index = $(this).attr("dt"); 
     $(this).parent().remove(); 
     calculate(); 
     return;  
    }); 

    function calculate() { 
     sum=0; 
     $('input').each(function(i, input){ 
      sum+=input.value ? parseInt(input.value) : 0; 
     }); 
     $("#sum").html("sum: " + sum); 
    } 
}); 
</script> 
</html>

出典

2017-05-27 13:27:48

ようこそスタックオーバーフロー！このコードの仕組みを説明する追加情報を少し追加してください。また、[ツアー]のサイトに興味があるかもしれません。 – wizzwizz4

クリートupdateTotal()と呼ばれる機能、あなたはそれを呼び出すたび、それはあなたのための現在の合計をcaculate：

function updateTotal() { 
    var sum = 0; 
    $("#items input").each(function() { 
     sum += +$(this).val() 
    }) 
    $("#total").text(sum); 
    }

その後#items内のすべての入力に入力イベントを追加：

$（ '＃items'）。on（ "input"、 "input"、function（）{ updateTotal（） }）;あなたが入力を削除すると

また、initは数（それ以外の場合は文字列である）になるために値を強制的に+$(this).val()そして、sum = 0を使用updateTotal();

を呼び出します。

var id = "1"; 
 

 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").append('<li><input type="number"/><button class="btn" dt="' + id + '">' + id + '</button></li>'); 
 
    id++; 
 
    }) 
 

 
    $('#items').on("input", "input", function() { 
 
    updateTotal() 
 
    }); 
 

 
    $("#items").on("click", ".btn", function() { 
 
    var index = $(this).attr("dt"); 
 
    console.log(index); 
 
    $(this).parent().remove(); 
 
    updateTotal(); 
 
    return; 
 
    }); 
 

 
    function updateTotal() { 
 
    var sum = 0; 
 
    $("#items input").each(function() { 
 
     sum += +$(this).val() 
 
    }) 
 
    $("#total").text(sum); 
 
    } 
 

 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Page Title</title> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
</head> 
 

 
<body> 
 
    <button id="add">add</button> 
 
    <ol id="items"></ol> 
 
    <div id="sum"></div> 
 
    <div>Total: <span id="total"></span></div> 
 
</body> 
 

 
</html>

出典

2017-05-27 12:46:18

入力を計算する簡単な方法は、誰かに説明することができます

答えて

関連する問題