1
コードを実行して要素を削除し、さらにボタンをクリックして要素を削除し、合計ボタンをクリックすると結果は表示されません。しかし、私は2つの入力とそれは素晴らしい動作します。入力を追加して機能をうまく機能させるためにはどうすればよいですか？ このJSFiddlejQuery DOMは要素を追加します - ループごとに間違って処理します
<html>
<head>
<title> Simple math between 2 numbers </title>
<style>
input {
margin: 5vw;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var num1, num2, result;
$("#addInput").click(function() {
var newId = $('input').length;
if (newId < 8) { //Up to 8 inputs
newId++;
$("<input type='number' id='number+newId+'/>").appendTo(".inputs");
}
});
$("#removeInput").click(function() {
var total = $('input').length;
if (total > 2) { //At least 2 inputs
$('input:last-child').remove();
}
});
$("#sum").click(function() {
var $counter = 0;
var numbers = {};
var length = $('input').length;
var result = 0;
$('input').each(function(){
$counter += 1;
numbers[$counter] = parseInt($('#' + 'number' + $counter).val());
result += numbers[$counter];
});
$('#result').html(result);
});
$("#howMuch").click(function() {
var total = $('input').length;
$('#result').html(total);
});
});
</script>
</head>
<body>
<div class="inputs">
<input type="number" id="number1" />
<input type="number" id="number2" />
<input type="number" id="number3" />
<input type="number" id="number4" />
<input type="number" id="number5" />
<input type="number" id="number6" />
<input type="number" id="number7" />
<input type="number" id="number8" />
</div>
<button id="addInput"> Add </button>
<button id="removeInput"> Remove </button> <br />
<button id="sum"> sum </button>
<button id="sum"> sub </button>
<button id="sum"> mul </button>
<button id="sum"> div </button> <br />
<button id="howMuch"> How much? </button>
<p id="result"> </p>
</body>
</html>