Getting CSS Variables to Add Correctly using calc()

Question

I'm experimenting with a new concept using CSS variables as binary registers to create a flow of data with the final calculations being finally displayed later down in the document. The idea works when displaying the final value for one variable, or two variables separately in the example below. But when I try adding the two variables together the process seems to be failing and I'm not sure what part of the CSS is at fault that's preventing the result from displaying.

The following example on: https://codepen.io/eliseodannunzio/pen/JjWbOBo shows what I'm referring to.

As you can see, the values for --ck0 through to --ck7 are recalculated with whatever century value is clicked on, (from 18 to 29), displaying a binary value, followed by the calculated decimal value. Also, the values for --m0 through to --m7 are recalculated with whatever month value is clicked on, (from January to December), displaying a binary value, followed by the calculated decimal value.

Both final values are being displayed via content counters which have been incremented from 0 to the values of --century and --month respectively.

What doesn't make sense is that with the third DIV which basically has both --century and --month added together, the --result value a) isn't updating with every click and b) isn't correctly adding the values and I'm in the dark as to why... can anyone shed any light? Thanks in advance.

:root {
  --isLeapYear: 0;
  /* Determinant to be worked out later, set as 0 for now */
  /* Month registers */
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
  /* Century keys */
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  --century: 0;
  --month: 0;
  --result: 0;
  --borderBlack: 1px solid black;
  --selectedColor: #007ec2;
}

[type="radio"],
[type="checkbox"] {
  display: none;
}

.century+label,
.month+label {
  padding-left: 4px;
  padding-right: 4px;
  height: 16px;
  border-left: var(--borderBlack);
  border-right: var(--borderBlack);
  font: 400 13.3333px Arial;
  display: inline-block;
  background-color: white;
  color: black;
}

.century+label {
  width: 20px;
  left: 5px;
  top: 5px;
}

.month+label {
  width: 80px;
  position: relative;
  left: 73px;
  top: -224px;
}

label[for="month-01"],
label[for="century-18"] {
  border-top: var(--borderBlack);
}

label[for="month-12"],
label[for="century-29"] {
  border-bottom: var(--borderBlack);
}

input:checked+label {
  background-color: var(--selectedColor);
  color: white;
}


/* Century Keys */

#century-18:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-19:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-20:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6*/
}

#century-21:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

#century-22:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-23:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-24:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6 */
}

#century-25:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

#century-26:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-27:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-28:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6 */
}

#century-29:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}


/* Month Keys */

.month[value="1"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: calc(1 - var(--isLeapYear));
}

.month[value="2"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: calc(1 - var(--isLeapYear));
  --m1: var(--isLeapYear);
  --m0: var(--isLeapYear);
}

.month[value="3"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 0;
}

.month[value="4"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
}

.month[value="5"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 1;
  --m0: 0;
}

.month[value="6"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 1;
}

.month[value="7"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
}

.month[value="8"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 1;
  --m0: 1;
}

.month[value="9"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 1;
  --m0: 0;
}

.month[value="10"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 1;
}

.month[value="11"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 0;
}

.month[value="12"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 1;
  --m0: 0;
}

.century:checked~#century_result {
  font-family: Courier;
  font-weight: 700;
  --century: calc(var(--ck7) * 128 + var(--ck6) * 64 + var(--ck5) * 32 + var(--ck4) * 16 + var(--ck3) * 8 + var(--ck2) * 4 + var(--ck1) * 2 + var(--ck0));
}

#century_result:after {
  counter-reset: C7 var(--ck7) C6 var(--ck6) C5 var(--ck5) C4 var(--ck4) C3 var(--ck3) C2 var(--ck2) C1 var(--ck1) C0 var(--ck0) CENTURY 0;
  counter-increment: CENTURY var(--century);
  content: "C" counter(C7) counter(C6) counter(C5) counter(C4) counter(C3) counter(C2) counter(C1) counter(C0) " = " counter(CENTURY)
}

.month:checked~#month_result {
  font-family: Courier;
  font-weight: 700;
  --month: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
}

#month_result:after {
  counter-reset: M7 var(--m7) M6 var(--m6) M5 var(--m5) M4 var(--m4) M3 var(--m3) M2 var(--m2) M1 var(--m1) M0 var(--m0) MONTH 0;
  counter-increment: MONTH var(--month);
  content: "M" counter(M7) counter(M6) counter(M5) counter(M4) counter(M3) counter(M2) counter(M1) counter(M0) " = " counter(MONTH)
}

#result {
  font-family: Courier;
  font-weight: 700;
  --century: calc(var(--ck7) * 128 + var(--ck6) * 64 + var(--ck5) * 32 + var(--ck4) * 16 + var(--ck3) * 8 + var(--ck2) * 4 + var(--ck1) * 2 + var(--ck0));
  --month: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
  --result: calc(var(--century) + var(--month));
}

#result:after {
  counter-reset: RESULT 0;
  counter-increment: RESULT var(--result);
  content: "R = " counter(RESULT);
}

#century_result {
  position: absolute;
  top: 240px;
}

#month_result {
  position: absolute;
  top: 265px;
}

#result {
  position: absolute;
  top: 290px;
}

<input id="century-18" name="century" class="century" type="radio" value="18" /><label for="century-18">18</label><br />
<input id="century-19" name="century" class="century" type="radio" value="19" /><label for="century-19">19</label><br />
<input id="century-20" name="century" class="century" type="radio" value="20" checked="checked" /><label for="century-20">20</label><br />
<input id="century-21" name="century" class="century" type="radio" value="21" /><label for="century-21">21</label><br />
<input id="century-22" name="century" class="century" type="radio" value="22" /><label for="century-22">22</label><br />
<input id="century-23" name="century" class="century" type="radio" value="23" /><label for="century-23">23</label><br />
<input id="century-24" name="century" class="century" type="radio" value="24" /><label for="century-24">24</label><br />
<input id="century-25" name="century" class="century" type="radio" value="25" /><label for="century-25">25</label><br />
<input id="century-26" name="century" class="century" type="radio" value="26" /><label for="century-26">26</label><br />
<input id="century-27" name="century" class="century" type="radio" value="27" /><label for="century-27">27</label><br />
<input id="century-28" name="century" class="century" type="radio" value="28" /><label for="century-28">28</label><br />
<input id="century-29" name="century" class="century" type="radio" value="29" /><label for="century-29">29</label><br />

<input id="month-01" name="month" class="month" type="radio" value="1" checked="checked" /><label for="month-01">January</label><br />
<input id="month-02" name="month" class="month" type="radio" value="2" /><label for="month-02">February</label><br />
<input id="month-03" name="month" class="month" type="radio" value="3" /><label for="month-03">March</label><br />
<input id="month-04" name="month" class="month" type="radio" value="4" /><label for="month-04">April</label><br />
<input id="month-05" name="month" class="month" type="radio" value="5" /><label for="month-05">May</label><br />
<input id="month-06" name="month" class="month" type="radio" value="6" /><label for="month-06">June</label><br />
<input id="month-07" name="month" class="month" type="radio" value="7" /><label for="month-07">July</label><br />
<input id="month-08" name="month" class="month" type="radio" value="8" /><label for="month-08">August</label><br />
<input id="month-09" name="month" class="month" type="radio" value="9" /><label for="month-09">September</label><br />
<input id="month-10" name="month" class="month" type="radio" value="10" /><label for="month-10">October</label><br />
<input id="month-11" name="month" class="month" type="radio" value="11" /><label for="month-11">November</label><br />
<input id="month-12" name="month" class="month" type="radio" value="12" /><label for="month-12">December</label><br />

<div id="century_result"></div>
<div id="month_result"></div>
<div id="result"></div>

Answer 1

because when doing #century-*:checked~ #century_result you only assign the value to #century_result so #result will get nothing. You need to target both element so simply do #century-*:checked ~ * (same logic with #month_result)

:root {
  --isLeapYear: 0;
  /* Determinant to be worked out later, set as 0 for now */
  /* Month registers */
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
  /* Century keys */
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  --century: 0;
  --month: 0;
  --result: 0;
  --borderBlack: 1px solid black;
  --selectedColor: #007ec2;
}

[type="radio"],
[type="checkbox"] {
  display: none;
}

.century+label,
.month+label {
  padding-left: 4px;
  padding-right: 4px;
  height: 16px;
  border-left: var(--borderBlack);
  border-right: var(--borderBlack);
  font: 400 13.3333px Arial;
  display: inline-block;
  background-color: white;
  color: black;
}

.century+label {
  width: 20px;
  left: 5px;
  top: 5px;
}

.month+label {
  width: 80px;
  position: relative;
  left: 73px;
  top: -224px;
}

label[for="month-01"],
label[for="century-18"] {
  border-top: var(--borderBlack);
}

label[for="month-12"],
label[for="century-29"] {
  border-bottom: var(--borderBlack);
}

input:checked+label {
  background-color: var(--selectedColor);
  color: white;
}


/* Century Keys */

#century-18:checked~ * {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-19:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-20:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6*/
}

#century-21:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

#century-22:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-23:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-24:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6 */
}

#century-25:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

#century-26:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-27:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-28:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6 */
}

#century-29:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}


/* Month Keys */

.month[value="1"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: calc(1 - var(--isLeapYear));
}

.month[value="2"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: calc(1 - var(--isLeapYear));
  --m1: var(--isLeapYear);
  --m0: var(--isLeapYear);
}

.month[value="3"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 0;
}

.month[value="4"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
}

.month[value="5"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 1;
  --m0: 0;
}

.month[value="6"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 1;
}

.month[value="7"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
}

.month[value="8"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 1;
  --m0: 1;
}

.month[value="9"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 1;
  --m0: 0;
}

.month[value="10"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 1;
}

.month[value="11"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 0;
}

.month[value="12"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 1;
  --m0: 0;
}

.century:checked~* {
  font-family: Courier;
  font-weight: 700;
  --century: calc(var(--ck7) * 128 + var(--ck6) * 64 + var(--ck5) * 32 + var(--ck4) * 16 + var(--ck3) * 8 + var(--ck2) * 4 + var(--ck1) * 2 + var(--ck0));
}

#century_result:after {
  counter-reset: C7 var(--ck7) C6 var(--ck6) C5 var(--ck5) C4 var(--ck4) C3 var(--ck3) C2 var(--ck2) C1 var(--ck1) C0 var(--ck0) CENTURY 0;
  counter-increment: CENTURY var(--century);
  content: "C" counter(C7) counter(C6) counter(C5) counter(C4) counter(C3) counter(C2) counter(C1) counter(C0) " = " counter(CENTURY)
}

.month:checked~#month_result {
  font-family: Courier;
  font-weight: 700;
  --month: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
}

#month_result:after {
  counter-reset: M7 var(--m7) M6 var(--m6) M5 var(--m5) M4 var(--m4) M3 var(--m3) M2 var(--m2) M1 var(--m1) M0 var(--m0) MONTH 0;
  counter-increment: MONTH var(--month);
  content: "M" counter(M7) counter(M6) counter(M5) counter(M4) counter(M3) counter(M2) counter(M1) counter(M0) " = " counter(MONTH)
}

#result {
  font-family: Courier;
  font-weight: 700;
  --century: calc(var(--ck7) * 128 + var(--ck6) * 64 + var(--ck5) * 32 + var(--ck4) * 16 + var(--ck3) * 8 + var(--ck2) * 4 + var(--ck1) * 2 + var(--ck0));
  --month: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
  --result: calc(var(--century) + var(--month));
}

#result:after {
  counter-reset: RESULT 0;
  counter-increment: RESULT var(--result);
  content: "R = " counter(RESULT);
}

#century_result {
  position: absolute;
  top: 240px;
}

#month_result {
  position: absolute;
  top: 265px;
}

#result {
  position: absolute;
  top: 290px;
}

<input id="century-18" name="century" class="century" type="radio" value="18" /><label for="century-18">18</label><br />
<input id="century-19" name="century" class="century" type="radio" value="19" /><label for="century-19">19</label><br />
<input id="century-20" name="century" class="century" type="radio" value="20" checked="checked" /><label for="century-20">20</label><br />
<input id="century-21" name="century" class="century" type="radio" value="21" /><label for="century-21">21</label><br />
<input id="century-22" name="century" class="century" type="radio" value="22" /><label for="century-22">22</label><br />
<input id="century-23" name="century" class="century" type="radio" value="23" /><label for="century-23">23</label><br />
<input id="century-24" name="century" class="century" type="radio" value="24" /><label for="century-24">24</label><br />
<input id="century-25" name="century" class="century" type="radio" value="25" /><label for="century-25">25</label><br />
<input id="century-26" name="century" class="century" type="radio" value="26" /><label for="century-26">26</label><br />
<input id="century-27" name="century" class="century" type="radio" value="27" /><label for="century-27">27</label><br />
<input id="century-28" name="century" class="century" type="radio" value="28" /><label for="century-28">28</label><br />
<input id="century-29" name="century" class="century" type="radio" value="29" /><label for="century-29">29</label><br />

<input id="month-01" name="month" class="month" type="radio" value="1" checked="checked" /><label for="month-01">January</label><br />
<input id="month-02" name="month" class="month" type="radio" value="2" /><label for="month-02">February</label><br />
<input id="month-03" name="month" class="month" type="radio" value="3" /><label for="month-03">March</label><br />
<input id="month-04" name="month" class="month" type="radio" value="4" /><label for="month-04">April</label><br />
<input id="month-05" name="month" class="month" type="radio" value="5" /><label for="month-05">May</label><br />
<input id="month-06" name="month" class="month" type="radio" value="6" /><label for="month-06">June</label><br />
<input id="month-07" name="month" class="month" type="radio" value="7" /><label for="month-07">July</label><br />
<input id="month-08" name="month" class="month" type="radio" value="8" /><label for="month-08">August</label><br />
<input id="month-09" name="month" class="month" type="radio" value="9" /><label for="month-09">September</label><br />
<input id="month-10" name="month" class="month" type="radio" value="10" /><label for="month-10">October</label><br />
<input id="month-11" name="month" class="month" type="radio" value="11" /><label for="month-11">November</label><br />
<input id="month-12" name="month" class="month" type="radio" value="12" /><label for="month-12">December</label><br />

<div id="century_result"></div>
<div id="month_result"></div>
<div id="result"></div>