CODEWITHSUNDEEP
jquery
Benedict John Payot
Benedict John Payot

Reputation: 33

Adding multiple textbox computed values in jQuery

I have textboxes that compute on the same textbox upon input. What I want is to add them all for the final result. I've tried using my old function. Here's how it looks: 

function compute(){
  var quiz = document.getElementById('quiz').value; 
  var recitation = document.getElemenById('recitation').value; 
  var homework = document.getElementById('homework').value; 
  var seatwork = document.getElementById('seatwork').value; 
  var activities = document.getElementById('activities').value; 
  var exams = document.getElementById('exams').value; 
  var project = document.getElementById('project').value; 
  var total = document.getElementById('total').value; 
  var grade = quiz+recitation+homework+seatwork+activities+exams+project; 
  total.value = grade;
}

And I've put oninput="compute()" on each textbox. But it's not interacting. What could be my mistake? Could it be the functions collide at one point?

Edit: I've created a test page. Basically the same. Here you go:

<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <title>Test</title>
</head>

<body>
<input id="first" type="text" onchange="compute()">

<script>
$('#first').on('change', function() {
    $(this).val($(this).val() * 3);
});
</script>

<input id="second" type="text" onchange="compute()">

<script>
$('#second').on('change', function() {
    $(this).val($(this).val() * 3);
});
</script>


<input id="result" type="text" readonly>

<script>
        function compute(){
                var myBox1 = document.getElementById('first').value;
                var myBox2 = document.getElementById('second').value;
                var result = document.getElemetById('result').value;
                var grade = first + second;
                total.value = grade;
        }
</script>

</body>
</html>

Upvotes: 0

Views: 145

Answers (1)

Kolja
Kolja

Reputation: 868

onChange="compute();"

Did you try that?

Edit: you probably also have to change total.value = grade; to total = grade; or something like that. I believe this function could be written a bit simpler, but I don't know your full code.

Upvotes: 1

Related Questions