Javascript按钮无法使用功能

时间:2017-09-12 16:23:17

标签: javascript html

我无法弄清楚为什么这个功能不起作用。赋值指令要求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);

5 个答案:

答案 0 :(得分:3)

3件事:

  1. getElementById必须是骆驼案。不是资本D在最后

  2. 对文本框的引用应该只是var textbox = document.getElementById('Result')而不是最后的.value

  3. 按钮的类型应为button,否则表单正在发布。

  4. 您的工作示例:

    &#13;
    &#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;
    &#13;
    &#13;

答案 1 :(得分:0)

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

最后,

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

答案 2 :(得分:0)

使用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;

答案 3 :(得分:0)

您的功能几乎没有问题:

  1. document.getElementByID中有拼写错误,应为document.getElementById
  2. 您必须将一个事件对象传递给您的函数,并调用preventDefault,以便您的表单不会提交给服务器
  3. 行:
  4. 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;
    }
    

答案 4 :(得分:0)

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