CODEWITHSUNDEEP
javascript
ladylyn
ladylyn

Reputation: 1

Adding textbox which has an onkeyup event and display value on other textbox

I want to get the sum of the textbox which has an onkeyup event. units multiplied by grades and display its sum to the third textbox which is the a and b, after that I want to add the a and b and display the sum on the total textbox.

But it's not displaying the sum on the total textbox. I think the problem is on the onkeyup="s();">.

This is my code:

function suma(){
var unitsA = document.getElementById('unitsA').value;
var gradesA = document.getElementById('gradesA').value;	
var result = parseInt(unitsA)  * parseInt(gradesA);
if (!isNaN(result)) {
document.getElementById('a').value = result;
}
}

function sumb(){
var unitsB = document.getElementById('unitsB').value;
var gradeB = document.getElementById('gradeB').value;	
var result = parseInt(unitsB)  * parseInt(gradeB);
if (!isNaN(result)) {
document.getElementById('b').value = result;
}
}
function s(){
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
var result = parseInt(a)  + parseInt(b);  
if (!isNaN(result)) {
document.getElementById('total').value = result;
}
} 
<input type="text"  id="unitsA"/>
<input type="text"  id="gradeA"  onkeyup="suma();"/>
<input type="text"  id="a" name="a" size="7" onkeyup="s();"/>

<input type="text"  id="unitsB"/>
<input type="text"  id="gradeB"  onkeyup="sumb();"/>
<input type="text"  id="b" name="b" size="7" onkeyup="s();"/>
<input type="text"  id="total" readonly="readonly" />

Upvotes: 0

Views: 348

Answers (2)

Dij
Dij

Reputation: 9808

you are using wrong id name, this code works:

function suma(){
var unitsA = document.getElementById('unitsA').value;
var gradesA = document.getElementById('gradesA').value;	
var result = parseInt(unitsA)  * parseInt(gradesA);
if (!isNaN(result)) {
document.getElementById('a').value = result;
s();
}
}

function sumb(){
var unitsB = document.getElementById('unitsB').value;
var gradeB = document.getElementById('gradeB').value;	
var result = parseInt(unitsB)  * parseInt(gradeB);
if (!isNaN(result)) {
document.getElementById('b').value = result;
s();
}
}
function s(){
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
var result = parseInt(a)  + parseInt(b);  
if (!isNaN(result)) {
document.getElementById('total').value = result;
}
} 
<input type="text"  id="unitsA"/>
<input type="text"  id="gradesA"  onkeyup="suma();"/>
<input type="text"  id="a" name="a" size="7" onchange="s();"/>

<input type="text"  id="unitsB"/>
<input type="text"  id="gradeB"  onkeyup="sumb();"/>
<input type="text"  id="b" name="b" size="7" onchange="s();"/>
<input type="text"  id="total" readonly="readonly" />

Upvotes: 1

SAMUEL
SAMUEL

Reputation: 8552

Your code has some typos and issues here is the solved solution.

function suma() {
  var unitsA = document.getElementById('unitsA').value;
  var gradesA = document.getElementById('gradeA').value;
  var result = parseInt(unitsA) * parseInt(gradesA);
  if (!isNaN(result)) {
    document.getElementById('a').value = result;
    document.getElementById('a').dispatchEvent(new Event('change'));
  }
}

function sumb() {
  var unitsB = document.getElementById('unitsB').value;
  var gradeB = document.getElementById('gradeB').value;
  var result = parseInt(unitsB) * parseInt(gradeB);
  if (!isNaN(result)) {
    document.getElementById('b').value = result;
    document.getElementById('b').dispatchEvent(new Event('change'));
  }
}

function s() {
  var a = document.getElementById('a').value;
  var b = document.getElementById('b').value;
  var result = parseInt(a) + parseInt(b);
  if (!isNaN(result)) {
    document.getElementById('total').value = result;
  }
}
<input type="text" id="unitsA" />
<input type="text" id="gradeA" onkeyup="suma();" />
<input type="text" id="a" name="a" size="7" onchange="s()" />

<input type="text" id="unitsB" />
<input type="text" id="gradeB" onkeyup="sumb();" />
<input type="text" id="b" name="b" size="7" onchange="s()" />
<input type="text" id="total" readonly="readonly" />

Upvotes: 1

Related Questions