Adding multiple textbox computed values in jQuery

Question

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>

I have no time to give you an answer, but try to avoid calling events from html. Mixing html and JavaScript is considered a bad practice. Use an event listener for that. — iovis
– iovis, Commented Oct 10, 2014 at 23:39

Kolja · Accepted Answer · 2014-10-10 22:55:41Z

1

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.

answered Oct 10, 2014 at 22:55

Kolja

8684 gold badges11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kolja Over a year ago

I see. Can you post your HTML and jQuery code as-is?

Kolja Over a year ago

Thanks for posting code. In the above, change total.value = grade; to $('#result').val(grade);

Benedict John Payot Over a year ago

Thanks for the reply man. Appreciated it much. But it still doesn't work. Maybe I'm missing something. Thanks again.

Collectives™ on Stack Overflow

Adding multiple textbox computed values in jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related