用Javascript计算时如何显示输出？

Question

我试图计算两个数字并显示它们，但是当我单击“计算总计”时，什么也没有发生，并且没有数字显示。我一直在寻找解决方案已有几个小时，但无法弄清楚为什么单击按钮后什么也没发生。如果有人可以帮助我一点，我将非常感激！

function calcTotal() {
  var intValue1 = parseInt(document.GetElementById('Value1').value);
  var intValue2 = parseInt(document.GetElementById('Value2').value);
  var strOper = document.GetElementById('operators').value;

  if (strOper === '+') {

    document.GetElementById('Total').value = intValue1 + intValue2;
    else if (strOper === '-') {
      document.GetElementById('Total').value = intValue1 - intValue2;
    } else if (strOper === '*') {
      document.GetElementById('Total').value = intValue1 * intValue2;
    } else {
      document.GetElementById('Total').value = intValue1 / intValue2;
    }
  }
  document.getElementById('submit').onclick = calcTotal();

<table class="table1">
  <tr>
    <td class="label">
      <label id="lblValue1" for="txtValue1">Value 1:</label>
    </td>
    <td class="control">
      <input class="formFields" type="text" id="Value1" name="txtValue1" required>
    </td>
  </tr>
  <tr>
    <td>
      <select name="dropdown" id="operators">
        <option value="+" selected>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="label">
      <label id="lblValue2" for="txtValue2">Value 2:</label>
    </td>
    <td class="control">
      <input class="formFields" type="text" id="Value2" name="txtValue2" required>
    </td>
  </tr>
</table>

<hr>

<table>
  <tr>
    <td class="label">
      <label id="lblTotal" for="txtTotal">Total:</label>
    </td>
    <td class="control">
      <input class="textview" type="text" id="Total" name="txtTotal">
    </td>
  </tr>
</table>
<table>
  <tr>
    <td class="label">
      <input id="submit" class="button" name='cmdCalcTotal' type="button" value="Calculate Total" onclick="calcTotal();">
    </td>
  </tr>

</table>

提前谢谢！！！！

Answer 1

您在此代码后面的逻辑实际上正常工作。您只是有一些语法错误。

1. if语句没有右括号（}）。
2. 您还拥有.GetElementById()。您应该有.getElementById()（g应该是小写字母）。
3. 此外，如果您已经在html中启用了，则您无需在javascript中拥有.onclick事件。我为你删除了。

该代码段已为您修复。

function calcTotal() {
  var intValue1 = parseInt(document.getElementById('Value1').value);
  var intValue2 = parseInt(document.getElementById('Value2').value);
  var strOper = document.getElementById('operators').value;

  if (strOper === '+') {

    document.getElementById('Total').value = intValue1 + intValue2;
  } else if (strOper === '-') {
    document.getElementById('Total').value = intValue1 - intValue2;
  } else if (strOper === '*') {
    document.getElementById('Total').value = intValue1 * intValue2;
  } else {
    document.getElementById('Total').value = intValue1 / intValue2;
  }
}

<table class="table1">
  <tr>
    <td class="label">
      <label id="lblValue1" for="txtValue1">Value 1:</label>
    </td>
    <td class="control">
      <input class="formFields" type="text" id="Value1" name="txtValue1" required>
    </td>
  </tr>
  <tr>
    <td>
      <select name="dropdown" id="operators">
        <option value="+" selected>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="label">
      <label id="lblValue2" for="txtValue2">Value 2:</label>
    </td>
    <td class="control">
      <input class="formFields" type="text" id="Value2" name="txtValue2" required>
    </td>
  </tr>
</table>

<hr>

<table>
  <tr>
    <td class="label">
      <label id="lblTotal" for="txtTotal">Total:</label>
    </td>
    <td class="control">
      <input class="textview" type="text" id="Total" name="txtTotal">
    </td>
  </tr>
</table>
<table>
  <tr>
    <td class="label">
      <input id="submit" class="button" name='cmdCalcTotal' type="button" value="Calculate Total" onclick="calcTotal();">
    </td>
  </tr>

</table>

Answer 2

您的代码中有一些错误：

• if块缺少{}
• 大写的GetElementById方法，请注意，所有带有uppercase的函数都是不同的，还有css和Id和class都是相同的。
• 冗余//document.getElementById('submit').onclick = calcTotal（）;

如果要保留最后一行，可以编辑为

document.getElementById('submit').addEventListener("click", calcTotal);

并删除按钮上的onclick="calcTotal();"

function calcTotal() {
  var intValue1 = parseInt(document.getElementById('Value1').value);
  var intValue2 = parseInt(document.getElementById('Value2').value);
  var strOper = document.getElementById('operators').value;

  if (strOper === '+') {

    document.getElementById('Total').value = intValue1 + intValue2;
    }
    else if (strOper === '-') {
      document.getElementById('Total').value = intValue1 - intValue2;
    } else if (strOper === '*') {
      document.getElementById('Total').value = intValue1 * intValue2;
    } else {
      document.getElementById('Total').value = intValue1 / intValue2;
    }
  }
  document.getElementById('submit').addEventListener("click", calcTotal);

<table class="table1">
  <tr>
    <td class="label">
      <label id="lblValue1" for="txtValue1">Value 1:</label>
    </td>
    <td class="control">
      <input class="formFields" type="text" id="Value1" name="txtValue1" required>
    </td>
  </tr>
  <tr>
    <td>
      <select name="dropdown" id="operators">
        <option value="+" selected>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="label">
      <label id="lblValue2" for="txtValue2">Value 2:</label>
    </td>
    <td class="control">
      <input class="formFields" type="text" id="Value2" name="txtValue2" required>
    </td>
  </tr>
</table>

<hr>

<table>
  <tr>
    <td class="label">
      <label id="lblTotal" for="txtTotal">Total:</label>
    </td>
    <td class="control">
      <input class="textview" type="text" id="Total" name="txtTotal">
    </td>
  </tr>
</table>
<table>
  <tr>
    <td class="label">
      <input id="submit" class="button" name='cmdCalcTotal' type="button" value="Calculate Total" >
    </td>
  </tr>

</table>