【问题标题】:Javascript function call from file从文件调用 Javascript 函数
【发布时间】:2017-09-12 23:40:22
【问题描述】:

所以...我的作业说...

创建一个名为calcBMI() 的函数,该函数使用体重和身高文本框中的值执行计算,并将结果分配给BMI 文本框。 使用 parseInt() 函数将该值转换为整数。 通过使用 documentobject.getElementByID(name) 和每个文本框的 value 属性从函数中引用文本框(换句话说,不要使用函数参数 AKA 将值传递给函数)。 添加事件监听器以调用 calcBMI() 函数

我在这里做过。请记住,在 html 中引用了 javascript 文件。每当我按下计算按钮时,什么都没有发生。

  function calcBMI() {


    var weight = parseInt(documentobject.getElementByID("weight"));

    var height = parseInt(documentobject.getElementByID("height"));

    var result = (weight * 703) / (height * height);

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

    textbox.value = result;
}


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

【问题讨论】:

  • 什么是html?是否抛出任何错误?

标签: javascript


【解决方案1】:

我看到了 3 件事:

  1. 访问 DOM 对象而不是其值
  2. 使用documentobject 而不是document
  3. 调用函数而不是将其作为回调传递。

这里解决 DOM 元素问题:
var weight = parseInt(document.getElementByID("weight").value)
对其他变量使用相同的方法。

您可能正在调用 calcBMI() 而不是将其作为回调 calcBMI 传递
.addEventListener("click", calcBMI, false);

查看MDN on event listeners

您似乎还引用了documentobject,而不是document

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

试试这个:
var textbox = document.getElementById('Result');

希望这会有所帮助!

【讨论】:

    【解决方案2】:

    在调用addEventListener() 时,您需要传递对回调函数的引用。您正在调用该函数,这是不正确的。试试这个:

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

    【讨论】:

    • 是否需要在 html 文件中添加任何内容才能使该功能正常工作?每当我点击提交时,一切都会回到 0。
    • 页面是否正在重新加载?如果是这样,可能是因为正在提交表单。您必须添加 JS 代码来阻止这种情况发生。没有看到您的 HTML,很难分辨。
    • BMI 计算器

    【解决方案3】:

    您将 dom 元素分配给 weight 和 height 变量。你应该得到文本字段的值。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-06-20
      • 2018-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-01-16
      • 2017-11-21
      相关资源
      最近更新 更多