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

3件事：

getElementById必须是骆驼案。不是资本D在最后
对文本框的引用应该只是var textbox = document.getElementById('Result')而不是最后的.value。
按钮的类型应为button，否则表单正在发布。

您的工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

1

一眼就好像您没有阻止默认的浏览器行为，您需要使用event.preventDefault()来阻止表单提交。

function [...](e) {
    e.preventDefault();
    [...]
}

2

通过在DOM下方加载JavaScript，确保在操作开始之前已加载HTML，或者您可以使用DOMContentLoaded事件。

3

完整性检查，确保使用<script></script>标记加载了脚本。如果它是外部文件，请使用src属性，如果它只是代码，则将其包装在上述标记中。

4

您需要更改getElementById使用getElementByID的使用情况，而不是d中的小写Id。

5

当您执行textbox.value = result;时，您实际所做的事情是textbox.value.value = result;，因为您最初将其引用为.value。

最后，

使用控制台，因为它会让你不再在这里询问错误。

Answer 3

使用click事件，将getElementByID更改为getElementById并将类型更改为按钮而不提交。提交会发布，但你需要的是调用函数。

<input type="button" id="submit" value="Calculate BMI" onclick="calcBMI()"/>

在您的javascript更改中

var textbox = document.getElementById('Result').value

要

var textbox = document.getElementById('Result').value = result;

并删除

textbox.value = result;

Answer 4

您的功能几乎没有问题：

document.getElementByID中有拼写错误，应为document.getElementById
您必须将一个事件对象传递给您的函数，并调用preventDefault，以便您的表单不会提交给服务器
行：

var textbox = document.getElementById('Result').value;

应该是

var textbox = document.getElementById('Result');

总体而言，您的功能应如下所示：

function calcBMI(e) {
        e.preventDefault();
    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;
}

Answer 5

你在这里的重量和身高都犯了一个错误。它应该只是在驼峰的情况下。 document.getElementById（“你的id”）以及为什么不在控制台中检查它显示的错误

Javascript按钮无法使用功能

5 个答案:

1

2

3

4

5

最后，