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? developer.mozilla.org/en-US/docs/Web/HTML/Element/… — Randy Casburn
– Randy Casburn, Commented Feb 1, 2021 at 17:21
input elements don't execute a load event. Use input or change. — Scott Marcus
– Scott Marcus, Commented Feb 1, 2021 at 17:21
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
– Dave Newton, Commented Feb 1, 2021 at 17:24
Then just call your function from your script and not from events in the elements. — Scott Marcus
– Scott Marcus, Commented Feb 1, 2021 at 17:26

micka190 · Accepted Answer · 2021-02-01 17:36:49Z

<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 · Accepted Answer · 2021-02-01 17:43:34Z

1

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>

edited Feb 1, 2021 at 17:43

answered Feb 1, 2021 at 17:37

Naren

4,5293 gold badges20 silver badges32 bronze badges

2 Comments

micka190 Over a year ago

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.

Naren Over a year ago

Agree, not sure why he's using, may be he's learning stuff, Just fixed his issue here!! :-)

Jack Silver · Accepted Answer · 2021-02-01 17:32:20Z

-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 1, 2021 at 17:32

Jack Silver

244 bronze badges

1 Comment

Scott Marcus Over a year ago

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.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related