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

Question

I can't seem to figure out why document.getElementById(...).value won't write to the text fields in the following code:

</div>
    <div id="righta">
    <input type="text" name="league"  id="league" readonly onload = "calcTotal()"/>League Dues
    <br />
    <input type="text" name="fee"  id="fee" readonly onload = "calcTotal()"/>Golf Course Fees
    <br />
    <input type="text" name="total"  id="total" readonly onload = "calcTotal()" />Total for the Season
    </div>
    </form>
    </div>
    </div>

    <div id="footer">

    <p> For more information, contact the League Director</p>

    </div>



    </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>

There is no `unload` attribute on an input element. When do you want this code to run? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes — Randy Casburn, Feb 01 '21 at 17:21
`input` elements don't execute a `load` event. Use `input` or `change`. — Scott Marcus, Feb 01 '21 at 17:21
@ScottMarcus he cannot use oninput or onchange, because he has the readonly flag set — TheEagle, Feb 01 '21 at 17:23
@RandyCasburn I want the fields to populate when the page loads — Max, Feb 01 '21 at 17:24
And, unrelated, why use readonly input fields for any of this? If you have static data what's the point of any of this? — Dave Newton, Feb 01 '21 at 17:24
Also, [don't use inline HTML event attributes](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991), like `onXyz` and [don't bother with self-terminating XHTML syntax](https://stackoverflow.com/questions/46939538/difference-between-script-src-foo-js-script-and-script-src-foo-js/46939597#46939597). — Scott Marcus, Feb 01 '21 at 17:25
@DaveNewton I'm just adding javascript to existing HTML. I did not add the readonly. — Max, Feb 01 '21 at 17:26
Then just call your function from your `script` and not from events in the elements. — Scott Marcus, Feb 01 '21 at 17:26
@ScottMarcus I didnt realize i needed to call onload in the script. I thought it would run automatically. This fixed my problem thank you. — Max, Feb 01 '21 at 17:29
You're not ***calling*** `onload`. `onload` is an attribute. Since your code is in a function, it must be "invoked" by something. You don't want or need your elements to invoke the function, you can just invoke it yourself as the first thing in your `script`. Or, you could just not have the code wrapped inside of a function in the first place and just have it be the first several lines of the script. — Scott Marcus, Feb 01 '21 at 17:35

score 1 · Answer 1 · answered Feb 01 '21 at 17:36

<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*/})();

Naren · Answer 2 · 2021-02-01T17:43:34.740

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>

You should avoid inline HTML events where possible. `addEventListener` would be better than using `onload=""` directly. Though you'd probably just want to use Immediately Invoked Function Expressions if you wanted to run your script once as soon as possible. — micka190, Feb 01 '21 at 17:47
Agree, not sure why he's using, may be he's learning stuff, Just fixed his issue here!! :-) — Naren, Feb 01 '21 at 18:40

score -2 · Accepted Answer · answered Feb 01 '21 at 17:32

-2

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 ;)

answered Feb 01 '21 at 17:32

Jack Silver

24
3

1

This is not really the correct answer as inline HTML event attributes should not be used. It "works", but it's not really right. See my comments above. – Scott Marcus Feb 01 '21 at 17:37

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

3 Answers3