Функция JavaScript calc - больше не работает после переключения на Bootstrap4

Question

Я перевожу сайт на Bootstrap4.Одна из страниц содержала простой калькулятор для генерации процентов на основе пользовательского ввода.Это работало нормально на старом сайте, используя базовый HTML без дополнительной инфраструктуры, но больше не реагирует на ввод пользователя.

Я попытался дважды проверить аналогичный калькулятор реального времени (http://javascript -кодер).com / javascript-form / javascript-calculator-script.phtml ), но я не могу заставить его работать.

function getSupport() {
  var theForm = document.forms["calculator"];
  var supportV = theForm.elements["support"];
  var indvSupport = 0;
  if (support.value != "") {
    indvSupport = parseInt(supportV.value);
  }
  return indvSupport;
}

function getTotal() {
  var indvSupport = getSupport();

  //set values
  var parentV = (indvSupport * 0.535).toFixed(2);
  var partnersV = (indvSupport * 0.0760).toFixed(2);
  var programsV = (indvSupport * 0.06).toFixed(2);
  var staffV = (indvSupport * 0.255).toFixed(2);
  var adminV = (indvSupport * 0.074).toFixed(2);

  //display result
  document.getElementById('parent').innerHTML = "$" + parentV;
  document.getElementById('partners').innerHTML = "$" + partnersV;
  document.getElementById('programs').innerHTML = "$" + programsV;
  document.getElementById('staff').innerHTML = "$" + staffV;
  document.getElementById('admin').innerHTML = "$" + adminV;
}

<form action="" id="calculator" onsubmit="return false;">&nbsp;
  <table align="center" style="border:none;">
    <tbody>
      <tr>
        <td style="font-weight: bold;">Total anticipated support:</td>
        <td>$&nbsp;<input id="support" name="support" oninput="getTotal()" type="text" /></td>
      </tr>
      <tr>
        <td>Parent Organization (53.5%)</td>
        <td>
          <div id="parent" style="float: right;">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <td>Supporting Partners (7.6%)</td>
        <td>
          <div id="partners" style="float: right;">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <td>Programs &amp; Support (6.0%)</td>
        <td>
          <div id="programs" style="float: right;">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <td>Staffing (25.5%)</td>
        <td>
          <div id="staff" style="float: right;">&nbsp;</div>
        </td>
      </tr>
      <tr>
        <td>Administration (7.4%)</td>
        <td>
          <div id="admin" style="float:right;">&nbsp;</div>
        </td>
      </tr>
    </tbody>
  </table>
</form>

Или на https://jsfiddle.net/zimerhonzl/ub7z09oL/9/

Это довольно простая форма, где пользователь вводит свое пожертвование и может видеть, как оно будет распределено.При вводе в главное поле нижние поля должны заполняться автоматически.

Answer 1

Решение "no wrap" в jsfiddle решило проблему.На реальном сайте оказывается, что над фрагментом в файле common.js произошла ошибка кода, препятствующая правильной загрузке функций.К сожалению, CMS удаляет любой встроенный javascript, поэтому я не мог разместить непосредственно код над ним на реальной странице.Теперь файл common.js правильно загружает функцию перед формой.