Why wont the javascript document.getElementByID.value write to my fields?

<script>
    function calcTotal() {
        const DUES = 6;
        const FEES = 16.50;
        const WEEKS = 12;
        var owedDues = (DUES * WEEKS);
        var owedFees = (FEES * WEEKS);
        var totalOwed = (owedDues + owedFees);
        document.getElementById('league').value = "$" + owedDues.toFixed(2);
        document.getElementById('fee').value = "$" + owedFees.toFixed(2);
        document.getElementById('total').value = "$" + totalOwed.toFixed(2);
    }
</script>

This defines a function named calcTotal. You're going to need to call it if you want it to run. You can do this by adding calcTotal(); as a line after your function block:

<script>
    function calcTotal() {
        const DUES = 6;
        const FEES = 16.50;
        const WEEKS = 12;
        var owedDues = (DUES * WEEKS);
        var owedFees = (FEES * WEEKS);
        var totalOwed = (owedDues + owedFees);
        document.getElementById('league').value = "$" + owedDues.toFixed(2);
        document.getElementById('fee').value = "$" + owedFees.toFixed(2);
        document.getElementById('total').value = "$" + totalOwed.toFixed(2);
    }
    calcTotal(); // <------------- function call here
</script>

Alternatively, if you don't want to call it, and just want it to run once, you can remove the function calcTotal() { line, and the respective closing curly brace. Your script will then be executed whenever that part of the document gets parsed by the browser (or whenever the browser decides to run it).

<script>
    const DUES = 6;
    const FEES = 16.50;
    const WEEKS = 12;
    var owedDues = (DUES * WEEKS);
    var owedFees = (FEES * WEEKS);
    var totalOwed = (owedDues + owedFees);
    document.getElementById('league').value = "$" + owedDues.toFixed(2);
    document.getElementById('fee').value = "$" + owedFees.toFixed(2);
    document.getElementById('total').value = "$" + totalOwed.toFixed(2);
</script>

Finally, you might want to look into "Immediately Invoked Function Expressions (IIFEs)", which are functions which are called:

• Once
• As soon as possible

You place these inside a .js file, preferably, though it should work just as easily in HTML.

You can achieve this by wrapping your function definition with parentheses (function calcTotal(){/* code here */}), and then immediately calling it:

(function calcTotal() {/* code here*/})();

From the docs

For input elements, the onload attribute is only supported when <input type="image">

So use onload on body tag.

<body onload="calcTotal()">...</body>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body onload="calcTotal()">
 <div id="righta">
   <input type="text" name="league" id="league" readonly/>League Dues
  <br />
  <input type="text" name="fee" id="fee" readonly/>Golf Course Fees
  <br />
  <input type="text" name="total" id="total" readonly/>Total for the Season
 </div>

  <div id="footer">
   <p> For more information, contact the League Director</p>
  </div>
  <script>
    function calcTotal() {
      const DUES = 6;
      const FEES = 16.50;
      const WEEKS = 12;
      var owedDues = (DUES * WEEKS);
      var owedFees = (FEES * WEEKS);
      var totalOwed = (owedDues + owedFees);
      document.getElementById('league').value = "$" + owedDues.toFixed(2);
      document.getElementById('fee').value = "$" + owedFees.toFixed(2);
      document.getElementById('total').value = "$" + totalOwed.toFixed(2);
     }
  </script>
 </body>
</html>

First: const WEEKS = 12; in your code, should be: const weeks = 12; because, below you use var owedDues = (DUES * weeks); var owedFees = (FEES * weeks);.

Second: Try to call the function here: <body onload="calcTotal()>"

Good luck ;)