Javascript 按钮无法与功能一起使用

Question

我不明白为什么这个功能不起作用。赋值指令要求 javascript 函数代码位于其自己的 javascript 文件中。

这是 html

<h2>BMI Calculator</h2>

  <form>
     <input type="text" id="weight" value="0" />
     <label for="weight">Weight in pounds</label>
     <input type="text" id="height" value="0" />
     <label for="height">Height in inches</label>
     <input type="text" id="Result" value="0" />
     <label for="Result"> BMI Result </label>
     <input type="submit" id="submit" value="Calculate BMI" />
    </form>

这是基于该形式的函数。它应该计算bmi。

function calcBMI() {
    var weight = parseInt(document.getElementByID("weight").value);
    var height = parseInt(document.getElementByID("height").value);
    var result = (weight * 703) / (height * height);
    var textbox = document.getElementById('Result').value;

    textbox.value = result;
}

document.getElementById("submit").addEventListener("click", calcBMI, false);

Answer 1

三件事:

1. getElementById 必须采用驼峰式大小写。末尾不带大写 D

2. 对文本框的引用应该只是 var textbox = document.getElementById('Result')，而不是在末尾加上 .value。

3. 按钮的类型应为 button，否则将发布表单。

您的工作示例:

function calcBMI() {
    var weight = parseInt(document.getElementById("weight").value);
    var height = parseInt(document.getElementById("height").value);
    var result = (weight * 703) / (height * height);
    var textbox = document.getElementById('Result');
    textbox.value = result;
}

document.getElementById("submit").addEventListener("click", calcBMI, false);

<h2>BMI Calculator</h2>

<form>
  <input type="text" id="weight" value="0" />
  <label for="weight">Weight in pounds</label>
  <input type="text" id="height" value="0" />
  <label for="height">Height in inches</label>
  <input type="text" id="Result" value="0" />
  <label for="Result"> BMI Result </label>
  <input type="button" id="submit" value="Calculate BMI" />
</form>