CODEWITHSUNDEEP
javascriptjqueryhtml
user2056342
user2056342

Reputation: 305

How to perform a calculation using jquery

I have a jsfiddle demo here: http://jsfiddle.net/9b9PW/15/

What I am trying to do is for each question set up the marks for each individual answer per question by typing in a value in the "Marks Per Answer" text input. What this should then do is automatically calculate the difference between the value entered in text input and the value displayed under the "Marks Remaining" column. This is so we know how many how many marks we have remaining to use for the other text inputs.

But the problem I am having is that it is not perform this calculation at all for each question and what I am asking is what do I need to change for order for the calculation to work?

Below is an example what the output should look like when you enter in the marks in the fiddle if the calculation was working, the question below contains 3 incorrect answers:

Question No.    Incorrect Answer    Marks per Answer    Total Marks     Marks Remaining
1                  B                2 (text input)       7              2
                   F                1 (text input)       
                   G                2 (text input)

The total values in all the text inputs = "5". "7" was default value under the "Marks Remaining " column for this question as the "Total Marks" is "7". So 7 minus 5 equals 2, thats why we have the value "2" marks remaining for the question.

Upvotes: 0

Views: 103

Answers (1)

Ed Bayiates
Ed Bayiates

Reputation: 11210

I fixed your code so that it performs the recalc at this Fiddle. It took a lot longer than it would have because your Javascript was very poorly formatted. When you present a question to StackOverflow, please have your code reasonably formatted including indenting.

The problem was that you had a strange for loop around your event handler assignment and an incorrect class selector. Since you can add multiple classes to any element, I added a class to each input "marksperanswer" and replaced your former code:

//find each question set and add listeners
for (var i=0;i<=questions;i++){                                     
$('input[class*="q'+i+'"]').keyup(function(){

With this:

//find each question set and add listeners
$('.marksperanswer').keyup(function() {

The event handler now triggers when a key is released in each input. This is a much simpler and more bulletproof method of selecting elements. It does not require a for loop since .keyup() will act on all elements that are selected in the jQuery collection.

You will also find that such problems are a lot easier to diagnose when you use a Javascript debugger such as Firebug or Chrome's debugger. Add statements like "console.log('Keyup fired!')" inside your handler function (logging is much easier than alert, since it doesn't steal focus and requires no keyboard or mouse interaction). If the log statement doesn't fire, you know the event handler is not getting attached properly. Also, you could have done this:

var testCollection = $('input[class*="q'+i+'"]');

Inspecting testCollection in the debugger would have shown it had 0 elements assigned, so you would have known your CSS selector wasn't working to select anything. When I console log $(".marksperanswer") I get 3 selections as expected:

Object[input.individualMarks 0, input.individualMarks 0, input.individualMarks 0]
0   input.individualMarks 0
1   input.individualMarks 0
2   input.individualMarks 0
(etc.)

Upvotes: 1

Related Questions