HTML и Javascript Форма не рассчитывается при отправке - PullRequest
Новая
       0

HTML и Javascript Форма не рассчитывается при отправке

3 голосов
/ 21 февраля 2020

Я новичок в кодировании. У меня проблема с формой, не возвращающей вычисленное значение, и я не уверен, что я сделал неправильно. Когда я нажимаю «Отправить», ничего не происходит. Я не вижу каких-либо ошибок в работе. Краткий красный всплывает в инструментах разработчика на chrome, но недостаточно для того, чтобы я мог прочитать ошибку.

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

Вот ссылка на jsfiddle: https://jsfiddle.net/dylancorvidae/ae289qum/1/

Спасибо за помощь.

Ответы [ 2 ]

3 голосов
/ 21 февраля 2020

Измените тип ввода с submit на button, чтобы предотвратить фактическую отправку формы, и обязательно вызовите свою функцию, добавив скобки после имени функции.

Исправленная кнопка «Рассчитать» выглядит как это: 

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

Примечание: Если вы на самом деле делаете хотите отправить форму после вычисления, вы можете оставить тип ввода как submit и привязка к событию onsubmit вместо события onclick.

Полный фрагмент: 

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>
2 голосов
/ 21 февраля 2020

Ваш код содержит ошибку при событии onclick кнопки.

Вам нужно использовать () после названия функции, например: onClick="characteristicLoad()"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...