3
現在、私は入力されたデータを計算するこのGPA電卓を持っています。私は、入力されたすべてのデータを計算する「Calculate」という計算ボタンを追加したいと思います。したがって、このボタンが押されたときにだけ計算が行われます。現在実行中のようにオンザフライではありません。ここでJQuery計算ボタン
コードです：
var $oBox = $('.outer-box');
var $gpa = $('#gpa');
var $result = $('.result').hide();
$('.btn').click(function() {
$('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});
$oBox.on('keyup', '.credits', function() {
$gpa.text(getTotal());
});
$oBox.on("change", ".grade-select", function() {
$gpa.text(getTotal());
$result.is(":hidden") && $result.show();
});
function getTotal() {
var gradeTotal = 0;
var sum = 0;
$(".credits").each(function() {
var $this = $(this);
if (!isNaN($this.val()) && !isNaN($this.parent().find('.grade-select').val())) {
sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.grade-select').val() || 0);
gradeTotal += parseFloat($this.val() || 0)
}
});
return (sum/gradeTotal).toFixed(2);
}
$(".btn").on("click", function() {
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
return false;
});body {
background-color: #A00000;
background-size: cover;
margin: 0;
padding: 0;
}
.outer-box {
border: 3px solid black;
height: true;
width: 75%;
padding: 10px;
margin: 10px auto 10px auto;
border-radius: 10px;
background-color: white;
}
.block {
margin: 5px;
}
.class {
border: 1px solid gray;
border-radius: 5px;
width: 150px;
height: 35px;
margin: 10px;
padding: 5px;
}
.credits {
border: 1px solid gray;
border-radius: 5px;
width: 100px;
height: 35px;
margin: 10px;
padding: 5px;
}
.grade-select {
border: 1px solid gray;
border-radius: 5px;
width: 100px;
height: 35px;
margin: 10px;
padding: 5px;
}
.btn {
border: 2px solid black;
border-radius: 5px;
width: 150px;
height: 35px;
margin: 10px;
padding: 5px;
font-weight: bold;
text-align: center;
}
.result {
border: 2px solid black;
border-radius: 5px;
width: 200px;
height: 100px;
margin: 20px auto 20px auto;
padding: 5px;
font-weight: bold;
text-align: center;
}
#gpa {
font-size: 4rem;
color: black;
font-weight: bold;
}<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='outer-box'>
<div class='inner-box'>
<form class='block'>
<input type="text" class='class' placeholder="Class">
</br>
<select class='credits'>
<option value="">Credits</option>
<option value="0.5">Half Year</option>
<option value="1">Full Year</option>
</select>
</br>
<select class='grade-select'>
<option value="">Grade</option>
<option value="4.6">A+</option>
<option value="4.0">A</option>
<option value="3.6">B+</option>
<option value="3.0">B</option>
<option value="2.6">C+</option>
<option value="2.0">C</option>
<option value="1.0">D</option>
<option value="0.0">F</option>
</select>
</form>
</div>
<div class='btn btn-default'>Add Class</div>
<div class='result'>
<h3 id="gpa">GPA</h3>
</div>
</div>
問題は何ですかクリック 上のボタンに変更イベントのドロップダウンからcalulate funtionalityの呼び出し？ –
@SarveshKumar現在、データが入力されると計算が行われます。私は、ボタンが押されたときに計算されたデータを必要とします。 –