Hello, im a new to javascript but learning as we go… i have a simple question for many.
I have two different functions they do add the number of total fields and display a total
but i want to add a 3 function that will add each total from the two different functions and display the total
can you all help me with that ?
here is the code…
//total input departments
function getTotalQty(){
var totalMorgage = document.getElementById('totalMorgage');
var qty = document.getElementsByClassName('qty');
var sumMorgage = 0;
for( var i = 0; i < qty.length; i++ ){
sumMorgage += Number(qty[i].value);
}
//display the total of inputs
totalMorgage.innerHTML = sumMorgage.toCurrencyString();
};
var elGetQty = document.getElementsByClassName('qty');
for( var i = 0; i < elGetQty.length; i++ ){
elGetQty[i].addEventListener('keyup', getTotalQty );
}
//total input bills
function getBillsQty(){
var totalBills = document.getElementById('totalBills');
var qtyBills = document.getElementsByClassName('qtyBills');
var sumBills = 0;
for( var i = 0; i < qtyBills.length; i++ ){
sumBills += Number(qtyBills[i].value);
}
//display the total of inputs
totalBills.innerHTML = sumBills.toCurrencyString();
};
var qtyBills = document.getElementsByClassName('qtyBills');
for( var i = 0; i < qtyBills.length; i++ ){
qtyBills[i].addEventListener('keyup', getBillsQty );
}
//want to add a 3 function that will add both total values of each function
function addFunctionOneAddFunctionTwo( ){
}
1 Like
here is my HTML Code
<h3>Mortage Apartments:</h3>
Dept 1<input type="text" class="qty"><br><br>
Dept 2<input type="text" class="qty"><br><br>
Dept 3<input type="text" class="qty"><br><br>
<label>The Total Mortage is: <span id="totalMorgage"></span></label>
<h3>Bills Apartments:</h3>
Dept 1<input type="text" class="qtyBills"><br><br>
Dept 2<input type="text" class="qtyBills"><br><br>
Dept 3<input type="text" class="qtyBills"><br><br>
<label>The Total Bills is: <span id="totalBills"></span></label>
<h3>Total from Bills and morgage:</h3>
<label id="finalTotal">The Total Mortage is:</label>
Thank you so much mr Dawson i got it now that is what i was looking forward too. you solved my concerns and questions thank you learning javascript and trying to make some examples that pop into my mind… thank you you are a genius… 
i have similar issues with this types of problems
below are my attemp
<script type="text/javascript">
function calculate(){
var result = document.getElementById('result');
var el, i = 0, total = 0;
while(el = document.getElementById('v'+(i++)) ) {
el.value = el.value.replace(/\\D/,"");
total = total + Number(el.value);
}
result.value = total;
var avg = document.getElementById("result").value;
if (avg <= 39){
document.getElementById("grading").value = ("F") ;
}
else if (avg <= 49) {
document.getElementById("grading").value = ("D") ;
}
else if (avg <= 59)
{
document.getElementById("grading").value = ("C") ;
} else if (avg <= 69) {
document.getElementById("grading").value = ("B") ;
} else if (avg >= 70) {
document.getElementById("grading").value = ("A") ;
}else if( avg >= 100.1){
document.getElementById("grading").value = ("Invalid Score");
alert("the Result You Entre is incorrect");
v0.value ="";
v1.value ="";
v2.value ="";
v3.value ="";
result.value ="";
grading.value="";
}
if(document.getElementById('v1').value =="" && document.getElementById('v2').value =="" && document.getElementById('v3').value =="" ){
result.value =""; grading.value="";
}
}
</script>
<script >
function Remaking() {
document.getElementById("result").value = document.getElementById("grading").value;
}
</script>
HTML CODE
<div class="form-group">
<label for="focusedInput">2 <sup> nd</sup> C.A:</label>
<input name="inSecondCa" type="Number" id ="v1" onkeyup="calculate()" min="0" max="20" maxlength="2" class="btn-lg form-control mymy">
</div>
<div class="form-group">
<label for="focusedInput">Exams</label>
<input name="inExams" type="Number" id ="v2" onkeyup="calculate()" min="0" max="60" maxlength="2" class="btn-lg form-control mymy">
</div>
<div class="form-group">
<label for="focusedInput">Total</label>
<input name="inTotal" value="0" type="text" id="result" onkeyup="calculate()" readonly class="btn-lg form-control mymy" >
</div>
<div class="form-group">
<label for="focusedInput">Remarks</label>
<input name="inRemark" value="X" type="text" id="grading" onkeyup="calculate()" readonly class="btn-lg form-control mymy" >
</div>
it work but can loop for multiples data That are Generated from the Database
|S/N|Names|Mark1|mark2|Total|Remark|
| 1 |Mr AA| 20 | 10 | 30 | F |
| 1 |Mr BB| 10 | 10 | 30 | F |
| 1 |Mr CC| 40 | 10 | 50 | C |
| 1 |Mr DD| 00 | 10 | 10 | F |
| 1 |Mr EE | 50 | 10 | 60 | B |
| 1 |Mr FF | 10 | 10 | 30 | F |
The Total and Remarks is what i want to find out automatically when user input the Data
<script type="text/javascript">
function calculate(){
var result = document.getElementById('result');
var el, i = 0, total = 0;
while(el = document.getElementById('v'+(i++)) ) {
el.value = el.value.replace(/\\D/,"");
total = total + Number(el.value);
}
result.value = total;
var avg = document.getElementById("result").value;
if (avg <= 39){
document.getElementById("grading").value = ("F") ;
}
else if (avg <= 49) {
document.getElementById("grading").value = ("D") ;
}
else if (avg <= 59)
{
document.getElementById("grading").value = ("C") ;
} else if (avg <= 69) {
document.getElementById("grading").value = ("B") ;
} else if (avg >= 70) {
document.getElementById("grading").value = ("A") ;
}else if( avg >= 100.1){
document.getElementById("grading").value = ("Invalid Score");
alert("the Result You Entre is incorrect");
v0.value ="";
v1.value ="";
v2.value ="";
v3.value ="";
result.value ="";
grading.value="";
}
if(document.getElementById('v1').value =="" && document.getElementById('v2').value =="" && document.getElementById('v3').value =="" ){
result.value =""; grading.value="";
}
}
</script>
<script >
function Remaking() {
document.getElementById("result").value = document.getElementById("grading").value;
}
</script>
HTML CODE
<div class="form-group">
<label for="focusedInput">2 <sup> nd</sup> C.A:</label>
<input name="inSecondCa" type="Number" id ="v1" onkeyup="calculate()" min="0" max="20" maxlength="2" class="btn-lg form-control mymy">
</div>
<div class="form-group">
<label for="focusedInput">Exams</label>
<input name="inExams" type="Number" id ="v2" onkeyup="calculate()" min="0" max="60" maxlength="2" class="btn-lg form-control mymy">
</div>
<div class="form-group">
<label for="focusedInput">Total</label>
<input name="inTotal" value="0" type="text" id="result" onkeyup="calculate()" readonly class="btn-lg form-control mymy" >
</div>
<div class="form-group">
<label for="focusedInput">Remarks</label>
<input name="inRemark" value="X" type="text" id="grading" onkeyup="calculate()" readonly class="btn-lg form-control mymy" >
</div>