I have a site for youth basketball, where parents can list their kid to get them onto a team. The listings that get replied to by teams needing players are deleted, but some listing remain on there for months or years. To combat the potential confusion of which grade a kid is currently in, I have them list the kid's graduation year instead. Some parents, however, struggle mightely in figuring out the simple math in that.

I want to put a textbox on top of the page that they can enter their kid's current grade, then have the output be the kid's graduation year (barring any flunking, of course). I'm also wondering if there's any way to incorporate the passing of time into the script, so that nothing needs to be changed from year to year. I'm thinking that with the school year ranging from September to May, that a formula might be something like this:

12 - (grade level entered) + (current year) + 1 [adding one only if the current day is between May and December]

but how can I make that into a table with javascript? Btw, I realize that even my formula may be wrong. Feel free to correct it.

ANY help is heavily appreciated.

Dani AI

Generated

Nice working solution from — the calculation and the idea of a fixed cutoff month are the right approach. The one practical gap to close is the summer ambiguity: are parents entering the grade the child just finished, or the grade they will be in come September? Make that explicit in the UI (a small checkbox or tooltip) or pick a school-start month you want to assume.

A robust, easy-to-reason formula is:

  1. pick a school-start month (commonly September → month index 8),
  2. compute the school-year start S = (today.month >= schoolStartMonth) ? today.year : today.year - 1,
  3. graduationYear = S + (MAX_GRADE - grade) + 1.

This keeps the logic tied to the academic year instead of a vague “add 1 in some months” rule and will remain correct year-to-year.

Example helper you can drop into your script (default: 12th grade, September start):

function calcGradYear(grade, opts) {
  opts = opts || {};
  var max = opts.maxGrade || 12;
  var start = (typeof opts.schoolStartMonth === 'number') ? opts.schoolStartMonth : 8; // Sept
  var ref = opts.referenceDate ? new Date(opts.referenceDate) : new Date();
  var S = (ref.getMonth() >= start) ? ref.getFullYear() : ref.getFullYear() - 1;
  grade = parseInt(grade, 10);
  if (isNaN(grade) || grade < 0 || grade > max) return null;
  return S + (max - grade) + 1;
}

Practical tips: use a dropdown for grade to avoid invalid entries (as you suggested), give a small checkbox for “grade as of next September” to remove summer ambiguity, allow a manual override for special cases (skipped/repeated grades), and store the computed graduation year server-side when saving listings so values don’t change unexpectedly for old posts. If the output doesn’t appear, confirm your display element ID and that the script runs after the DOM loads (or bind to an event).

Recommended Answers

All 8 Replies

Not sure what you mean regarding outputting a table, I don't know what the contents for your table are or where you're grabbing them from. The following script should help you get the expected graduation year with JS, though:

<input type="text" id="currentGrade" />
<input type="submit" id="getGradYear" onclick="expectedGradYear(); return false;" />

<script type="text/javascript">
function expectedGradYear() {

    currGrade = document.getElementById('currentGrade').value;

    // Make sure we're dealing with a number from 1(?)-12
    currGrade = parseInt(currGrade, 10);
    if(currGrade < 1 || currGrade > 12) {
        // Do your error handling
        alert("invalid range");
        return false;
    }

    var MAX_GRADE = 12;

    var currTime = new Date();
    var currYear = currTime.getFullYear();
    var currMonth = currTime.getMonth(); // getMonth() returns 0 - 11; 0 = Jan, 1 = Feb, etc.

    var gradYear = currYear + (MAX_GRADE - currGrade);  

    // Are we in Jun - Dec? (Change based on when classes end at your school)
    if(currMonth >= 5 && currMonth <= 11)
        gradYear++;

    document.getElementById('ElementYouWantToUpdate').innerHTML = gradYear;

    return false;   
}
</script>

~ EF

That looks great and is exactly what I was talking about. But it doesn't output anything when I am in the range. Am I doing something wrong?

And would it be easier to just do a dropdown list of 1st Grade, 2nd Grade, etc... Then there wouldn't have to be an invalid argument. Let me know, and thank you so much.

Member Avatar for Member #905211

I'm curious, why not just mark down the birth date of the person? You can figure out everything you need based off of that, can you not?

Sometimes kids stay back a grade, or get skipped. Youth basketball rules are kinda silly. To me, I never did mind playing against older players. That just helps you get better. But they are so strict on grade level and cut-off dates, n such. I'm kinda dissapointed in the parents who can't just count up to the grad year, to tell you the absolute truth!

You need to modify the element ID on line 29 of my code to indicate where you want the year to appear. So for example, after HTML for the submit you could add:

<span id="exp-grad-date"></span>

Then on line 29, change the value in the single quotes to exp-grad-date

That is awesomely perfect. Thank you so much. I don't know if I could have done that if I had two lifetimes to live.

No worries, not too tough when you practice it! :)
Please mark the thread as solved if you have no further questions.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.