HTML and Javascript Form not calculating on submit

Question

I'm new to coding. I'm having an issue with a form not returning a calculated value and I'm not sure what I did wrong. When I press submit nothing happens. I don't see any linting errors. A brief red pops up in the dev tools on chrome but not long enough for me to read the error.

HTML:

<body>

  <form id="load-calculator">
    <p>
      <label for="performer-mass">Please Enter Performer(s) Weight (lbs)</label>
      <input id="performer-mass" required name="performer-mass" type="number" min="1">
    </p>
    <p>
      <label for="apparatus-mass">Please Enter Apparatus Weight (lbs)</label>
      <input id="apparatus-mass" required name="apparatus-mass" type="number" min="1">
    </p>
    <p>
      <label for="dynamic-factor">Please Choose An Apparatus <br>(Dynamic Adjustment Factor)</label>
      <select id="dynamic-factor" required name="dynamic-factor">
        <option value="1.5">Aerial Yoga (1.5)</option>
        <option value="2">Silks (2 for drops less than 3ft.)</option>
        <option value="3">Static Trapeze (3)</option>
        <option value="3">silks (3 for drops 3-8ft.)</option>
        <option value="5">Rope (5)</option>
        <option value="5">Straps (5)</option>
      </select>
    </p>
    <p>
      <input type="submit" onClick="characteristicLoad" value="Calculate">
    </p>
    <p>
      <label for="result">Estimated Characteristic Load</label>
      <input for="load-calculator" id="result">
    </p>
  </form>

  <script type="module" src="src/loadCalculator.js"></script>

</body>

Javascript:

export function characteristicLoad() {
  const performerMass = document.getElementById('performer-mass').value;
  const apparatusMass = document.getElementById('apparatus-mass').value;
  const totalMass = performerMass + apparatusMass;

  const dynamicFactor = document.getElementById('dynamic-factor').value;

  let result = document.getElementById('result');

  let characteristicLoad = totalMass * dynamicFactor * 6;
  result.value = characteristicLoad;
}

Here is a link to a jsfiddle: https://jsfiddle.net/dylancorvidae/ae289qum/1/

Thanks for the help.

Robby Cornelissen · Accepted Answer · 2020-02-21 20:26:21Z

3

Change your input type from submit to button to prevent actually submitting the form, and make sure to call your function by adding parentheses behind the function name.

The corrected "Calculate" button looks like this:

<input type="button" onclick="characteristicLoad()" value="Calculate">

^{Note: If you actually do want to submit the form after the calculation, you can keep the input type as submit and bind to the onsubmit event instead of the onclick event.}

Complete snippet:

function characteristicLoad() {
  const performerMass = document.getElementById('performer-mass').value;
  const apparatusMass = document.getElementById('apparatus-mass').value;
  const totalMass = performerMass + apparatusMass;

  const dynamicFactor = document.getElementById('dynamic-factor').value;

  let result = document.getElementById('result');

  let characteristicLoad = totalMass * dynamicFactor * 6;
  result.value = characteristicLoad;
}

<form id="load-calculator">
  <p>
    <label for="performer-mass">Please Enter Performer(s) Weight (lbs)</label>
    <input id="performer-mass" required name="performer-mass" type="number" min="1">
  </p>
  <p>
    <label for="apparatus-mass">Please Enter Apparatus Weight (lbs)</label>
    <input id="apparatus-mass" required name="apparatus-mass" type="number" min="1">
  </p>
  <p>
    <label for="dynamic-factor">Please Choose An Apparatus <br>(Dynamic Adjustment Factor)</label>
    <select id="dynamic-factor" required name="dynamic-factor">
      <option value="1.5">Aerial Yoga (1.5)</option>
      <option value="2">Silks (2 for drops less than 3ft.)</option>
      <option value="3">Static Trapeze (3)</option>
      <option value="3">silks (3 for drops 3-8ft.)</option>
      <option value="5">Rope (5)</option>
      <option value="5">Straps (5)</option>
    </select>
  </p>
  <p>
    <input type="button" onClick="characteristicLoad()" value="Calculate">
  </p>
  <p>
    <label for="result">Estimated Characteristic Load</label>
    <input for="load-calculator" id="result">
  </p>
</form>

edited Feb 21, 2020 at 20:26

answered Feb 21, 2020 at 20:21

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Corvidae Over a year ago

Thank you for this great answer. Unfortunately it's not working in vscode for some reason. I keep getting this error in chrome dev console: "Uncaught ReferenceError: characteristicLoad is not defined at HTMLInputElement.onclick "

Robby Cornelissen Over a year ago

Means that your JavaScript is not properly loaded. (Note that I stripped the script tag off my HTML because it's automatically loaded by the snippet.)

Corvidae Over a year ago

I did notice that and used my script tag <script type="module" src="src/loadCalculator.js"></script> That is the correct file path because when I click on it in vscode it opens the right file. I normally place my scripts at the bottom of my body but for some reason it's not working still. And I tried moving outside of body and in the head. Googling to see if there is something out there that might help. Thank you again.

blurfus · Accepted Answer · 2020-02-21 22:51:39Z

2

Your code has error at the onclick event of button.

You have to need use () after the function name like this: onClick="characteristicLoad()"

edited Feb 21, 2020 at 22:51

blurfus

14.1k9 gold badges63 silver badges69 bronze badges

answered Feb 21, 2020 at 20:25

Butani Hardik

811 silver badge6 bronze badges

Collectives™ on Stack Overflow

HTML and Javascript Form not calculating on submit

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related