Final(ish)

index.html

@@ -456,6 +456,8 @@
          };
          const inpAbilityCost = document.getElementById("inp-ability-cost");
          const inpAbilityEffort = document.getElementById("inp-ability-effort");
+         const abilityRoller = document.getElementById("roll-ability");
+         const abilityCostDisplay = document.getElementById("ability-cost-display");
 
          const dspAbilityPool = document.getElementById("dsp-ability-pool");
          const dspAbilityCost = document.getElementById("dsp-ability-cost");
@@ -660,6 +662,8 @@
              return String(str).charAt(0).toUpperCase() + String(str).slice(1);
          };
 
+         const d20 = () => Math.floor(Math.random() * 20) + 1;
+
          const getSelectedPool = () => {
              var currentPoolSelector = document.querySelector("input[name=pool-selector]:checked");
 
@@ -788,6 +792,41 @@
                  updateAbilityCostDisplay();
              },
          );
+
+         abilitySelector.addEventListener(
+             "change",
+             (evt) => {
+                 var selectedOption = evt.target.selectedOptions[0];
+
+                 if (selectedOption.dataset.pool !== null) {
+                     var poolChooser = poolChoices[selectedOption.dataset.pool];
+                     poolChooser.checked = true;
+                     abilityInitialCost.value = Number(selectedOption.dataset.cost);
+                 }
+             },
+         );
+
+         abilityInitialCost.addEventListener("input", updateAbilityCost);
+
+         var abilityEffortChecking = false;
+
+         abilityEffort.addEventListener(
+             "input",
+             (evt) => {
+                 if (abilityEffortChecking) return;
+
+                 abilityEffortChecking = true;
+
+                 if (evt.target.value < 0) {
+                     evt.target.value = 0;
+                 } else if (evt.target.value >= inputMaxEffort.value) {
+                     evt.target.value = maxEffort.value;
+                 }
+
+                 updateAbilityCost();
+                 abilityEffortChecking = false;
+             },
+         );
         </script>
     </body>
 </html>