Question

我正在将网站转移到Bootstrap4。其中一个页面包含一个简单的计算器，可根据用户输入生成百分比。在使用基本HTML且没有其他框架的旧站点上，此方法运行良好，但不再响应用户输入。

我尝试对类似的实时计算器（http://javascript-coder.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

jsfiddle中的“ no wrap”解决方案解决了该问题。在实际站点上，事实证明common.js文件中的代码片段上方存在代码错误，导致功能无法正确加载。不幸的是，CMS去除了任何嵌入式JavaScript，因此我无法在实际页面上直接发布上面的代码。现在，common.js文件可以在表单之前正确加载该函数。

JavaScript calc函数-切换到Bootstrap4

1 个答案: