CODEWITHSUNDEEP
javascripthtmlformscalculated-field
Corvidae
Corvidae

Reputation: 31

HTML and Javascript Form not calculating on submit

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.

Upvotes: 3

Views: 488

Answers (2)

Butani Hardik
Butani Hardik

Reputation: 81

Your code has error at the onclick event of button.

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

Upvotes: 2

Robby Cornelissen
Robby Cornelissen

Reputation: 97130

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>

Upvotes: 3

Related Questions