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 · Answer 1 · 2020-02-21T20:26:21.853

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>

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 " — Corvidae, Feb 21 '20 at 21:10
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.) — Robby Cornelissen, Feb 21 '20 at 21:11
I did notice that and used my script tag 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. — Corvidae, Feb 21 '20 at 21:20

score 2 · Answer 2 · edited Feb 21 '20 at 22:51

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 '20 at 22:51

blurfus

13,485
8
55
61

answered Feb 21 '20 at 20:25

Butani Hardik

43
6

HTML and Javascript Form not calculating on submit

2 Answers2